How can I use jQuery to add a class to my "infoBlock" and style its elements accordingly?
I have an infoBlock but need assistance with adding a new class.
li {
list-style-type: none;
}
.infoBlock {
display: block;
width: 520px;
height: 280px;
background: #fff;
margin: 50px 0 0 225px;
position: relative;
}
.infoBlock .more {
width: 180px;
height: 40px;
display: inline-block;
background: #5795f9;
text-decoration: none;
font: bold 16px Helvetica;
text-transform: uppercase;
padding: 10px ;
text-align: center;
margin: 20px 0 0 0;
color: #fff;
}
.infoBlock .person{
display: inline-block;
width: 25%;
}
.infoBlock .person img {
width: 80%;
margin: 20px 0 0 20px;
}
.infoBlock .person ul {
margin: 20px 0 0 20px;
}
.infoBlock .person .risk {
text-transform: uppercase;
color: #a6a6a6;
font: bold 15px Helvetica;
}
.infoBlock .person .level {
margin: 10px 0 0 ;
color: #ff8080;
font: bold 14px Helvetica;
}
.infoBlock .personDescription {
display: inline-block;
width: 74%;
position: absolute;
margin: 20px 0 0 20px;
}
.infoBlock .personDescription .name{
font:bold 20px Helvetica;
color: #a6a6a6;
margin: 0 0 20px;
}
.infoBlock .personDescription .position {
font: bold 15px Helvetica;
color: #5795f9;
margin: 0 0 25px;
}
.infoBlock .personDescription .description {
font: bold 14px Helvetica;
color: #a6a6a6;
}
.infoBlock .personDescription .description span {
color: #5795f9;
}
.infoBlock .personDescription .description .black {
color: #000;
}
.infoBlock .fullInfo {
display: none;
}
/* //////////////////////////// */
.infoBlock.f {
height: 480px;
}
.infoBlock.f .fullInfo {
display: block;
}
.infoBlock.f .person ul{
position: absolute;
margin: -115px 0 0 450px;
}
.infoBlock.f .personDescription .description {
display: none;
}
.infoBlock.f .border {
width: 80%;
height: 1px;
background-color: #a4a4a4;
margin: 10px 0 0 20px;
position: absolute;
}
.infoBlock.f .personDescription .more{
display: none;
}
.infoBlock.f .fullInfo {
position: absolute;
margin: 25px 0 0 25px;
}
.infoBlock.f .fullInfo .infoMenu li:hover {
color: #5795f9;
}
.infoBlock.f .fullInfo .infoMenu li{
display: inline;
margin:0 30px 0 0;
color: #a6a6a6;
font: bold 14px Helvetica;
cursor: pointer;
}
.infoBlock.f .fullInfo .scheme .schemeNumber {
margin: 20px 0 8px 30px;
font: bold 15px Arial;
color: #000;
}
.infoBlock.f .fullInfo .scheme .chance {
margin:0 0 10px 30px;
font: 16px Arial;
font-weight: 200;
color: #000;
}
.infoBlock.f .fullInfo .scheme table {
margin: 0 0 10px 28px;
}
.infoBlock.f .fullInfo .scheme table p {
font: bold 15px Helvetica;
}
.infoBlock.f .fullInfo .scheme table .type {
color: #a5a5a5;
font: 15px Helvetica;
}
.infoBlock.f .fullInfo .scheme .problem {
font: 16px Arial;
color: #a5a5a5;
margin: 0 0 20px 30px;
}
.infoBlock.f .fullInfo .scheme .more {
margin: 0 0 0 30px;
}<div class = "infoBlock">
<div class = "person">
<img src="img/1.jpg" alt = "">
<ul>
<li><p class = "risk">авыаыа:</p></li>
<li><p class = "level">Висоцуацуацуаукий</p></li>
<li></li>
</ul>
</div>
<div class = "personDescription">
<h2 class = "name">Василенко<br> Василь Антипович</h2>
<h4 class = "position">Авыпукпуфппук</h4>
<p class = "description">АВаываывавыпкупк <span>2х схем<br></span> на сумму більш ніж <span class = "black">3 млн. грн<span></p>
<a href="#" class = "more" >докладніше</a>
</div>
<div class = "fullInfo">
<ul class = "infoMenu">
<li>Схеми</li>
<li>Зв'язки</li>
<li>Додаткова інформація</li>
</ul>
<div class = "scheme">
<h3 class = "schemeNumber">Схема №1.1</h3>
<p class = "chance">Вірогідність - 93%</p>
<table>
<tr>
<td><p>Тип:</p></td>
<td><p class = "type">авыавыавыавыа</p></td>
</tr>
</table>
<p class = "problem">Квартира площею 123 кв. м записана<br> на Василенко М.В. (теща)</p>
<a href="#" class = "more f" >докладніше</a>
</div>
</div>
</div>