jQuery addClass example

Change class name on click in jQuery

by Chuck Tornton

HTML

<div class="qwerty">
     Тут инфа № 1
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo reprehenderit, repellat enim 
    <div class="showMore">
      ooo
    </div>
  </div>
  <div class="qwerty">
     Тут инфа № 1
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo reprehenderit, repellat enim     ipsam earum fugiat repellendus, dicta rem! Veritatis cumque obcaecati enim. Eum itaque         temporibus nisi minima aliquam assumenda, praesentium.
         Тут инфа № 1
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo reprehenderit, repellat enim     ipsam earum fugiat repellendus, dicta rem! Veritatis cumque obcaecati enim. Eum itaque         temporibus nisi minima aliquam assumenda, praesentium.
          Тут инфа № 1
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo reprehenderit, repellat enim     ipsam earum fugiat repellendus, dicta rem! Veritatis cumque obcaecati enim. Eum itaque         temporibus nisi minima aliquam assumenda, praesentium.
    <div class="showMore">
      ooo
    </div>
  </div>

CSS

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

.qwerty {
    background: #9e9e9e;
    max-height: 301px;
    overflow: hidden;
    border-radius: 4px;
    padding: 20px;
    font-size: 25px;
    text-align: center;
    margin: 10px;
    width: 301px;
    display: flex;
    cursor: pointer;
}

.qwerty:hover {
  box-shadow: #FFEB3B 0 0 7px 0;
}

.active {
  max-height: 700px;
  cursor: pointer;
  overflow: auto;
}

.showMore {
    background: transparent;
    border: 1px solid #fff;
    border-radius: 5px;
    font-size: 15px;
    width: 30px;
    height: 20px;
    color: #fff;
    display: none;
}

JavaScript

var qwerty = ('.qwerty');
var button = ('.showMore');

    $(qwerty).click(function () {
  		$(this).toggleClass('active');
    });


	$(qwerty).each(function() {
		if ($(this).height() > 300) {
				$(button).css("display", "block;");
		} else {
				$(button).css("display", "none;");
		}
	});