jQuery addClass example

Change class name on click in jQuery

HTML

<div class="er">
  <div class="qwerty">
     <div class="uiop">Тут инфа № 1</div>
  </div>
</div>
<div class="er">
  <div class="qwerty">
    <div class="uiop">Тут инфа № 2</div>
  </div>
</div>
<div class="er">
  <div class="qwerty">
    <div class="uiop">Тут инфа № 3</div>
  </div>
</div>

CSS

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
  display: flex;
  flex-direction: column;
}

.qwerty {
  background: #436344;
  border: 1px solid black;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  margin: 10px;
  height: 110px;
  width: 300px;
  display: flex;
  cursor: pointer;
}

.showMore {
    background: #0084ff;
    border: 1px solid black;
    border-radius: 5px;
    padding: 8px 14px;
    font-size: 15px;
    color: #fff;
    margin: 20px;
}

.heightAuto{
    height: auto;
}

JavaScript

var er = ('.er');
var qwerty = ('.qwerty');



  $(document).ready(function() {

    $(qwerty).on('click', function() {
      $(this).height(300).css({
          cursor: "pointer",
   	 			backgroundColor: "green",
    			overflow: "auto"
      });
    });

  });