jQuery addClass example

Change class name on click in jQuery

by orlov0562

HTML

<div id="crossing">
  <ul>
    <li><a href="#">Название 1</a></li>
    <li><a href="#">Название 2</a></li>
    <li><a href="#">Название 3</a></li>
    <li><a href="#">Название 4</a></li>
    <li><a href="#">Название 5</a></li>
    <li><a href="#">Название 6</a></li>
    <li><a href="#">Название 7</a></li>
    <li><a href="#">Название 8</a></li>
    <li id="control">Развернуть/Свернуть</li>
  </ul>
</div>

CSS

#crossing ul li:nth-child(n+5) {
  display:none;
}

#crossing.expand ul li:nth-child(n+5) {
  display:list-item;
}

#crossing ul li#control {
  display:list-item;
  margin-top: 15px;
  cursor:pointer;
}

JavaScript

$('#control').click(function(){
    $('#crossing').toggleClass('expand');
});