Add a class when click on button : <p>I have a block which has some elements. I did that elements will get new styles if I add a some class to this block. SO, can you help me with code in jQuery which add a class to my "infoBlock".</p>

<p>Ihave a  but need </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>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;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class = "infoBlock"&gt;

      &lt;div class = "person"&gt;
        &lt;img src="img/1.jpg" alt = ""&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;p class = "risk"&gt;авыаыа:&lt;/p&gt;&lt;/li&gt;
          &lt;li&gt;&lt;p class = "level"&gt;Висоцуацуацуааукий&lt;/p&gt;&lt;/li&gt;
          &lt;li&gt;&lt;/li&gt;

        &lt;/ul&gt;
      &lt;/div&gt;

      &lt;div class = "personDescription"&gt;
        &lt;h2 class = "name"&gt;Василенко&lt;br&gt; Василь Антипович&lt;/h2&gt;

        &lt;h4 class = "position"&gt;Авыпукпуфппук&lt;/h4&gt;

        &lt;p class = "description"&gt;АВаываывавыпкупк &lt;span&gt;2х схем&lt;br&gt;&lt;/span&gt; на сумму більш ніж &lt;span class = "black"&gt;3 млн. грн&lt;span&gt;&lt;/p&gt;
        &lt;a href="#" class = "more" &gt;докладніше&lt;/a&gt;

      &lt;/div&gt;


      &lt;div class = "fullInfo"&gt;
        &lt;ul class = "infoMenu"&gt;
          &lt;li&gt;Схеми&lt;/li&gt;
          &lt;li&gt;Зв'язки&lt;/li&gt;
          &lt;li&gt;Додаткова інформація&lt;/li&gt;
        &lt;/ul&gt;

        &lt;div class = "scheme"&gt;
          &lt;h3 class = "schemeNumber"&gt;Схема №1.1&lt;/h3&gt;
          &lt;p class = "chance"&gt;Вірогідність - 93%&lt;/p&gt;
          &lt;table&gt;
            &lt;tr&gt;
              &lt;td&gt;&lt;p&gt;Тип:&lt;/p&gt;&lt;/td&gt;  
              &lt;td&gt;&lt;p class = "type"&gt;авыавыавыавыа&lt;/p&gt;&lt;/td&gt;
            &lt;/tr&gt;

          &lt;/table&gt;

          &lt;p class = "problem"&gt;Квартира площею 123 кв. м записана&lt;br&gt; на Василенко М.В. (теща)&lt;/p&gt;

          &lt;a href="#" class = "more f" &gt;докладніше&lt;/a&gt;
        &lt;/div&gt;

      &lt;/div&gt;


    &lt;/div&gt;</code></pre>
</div>
</div>
</p>
