jQuery addClass example

Change class name on click in jQuery

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="row">
  <div class="dropdown-container col-12">
    <div class="row">
      <div class="col-12 search-col">
        <a href="#" id="init-dropdown">Toggle Book List</a>
      </div>
    </div>
    <div class="row">
      <div class="col-12 book-list-container">
        <ul id="book-list" >
          <li class="book-entry" book-chapters="12"><a href="#">Book 1</a></li>
          <li class="book-entry" book-chapters="14"><a href="#">Book 2</a></li>
          <li class="book-entry" book-chapters="4"><a href="#">Book 3</a></li>
          <li class="book-entry" book-chapters="7"><a href="#">Book 4</a></li>
          <li class="book-entry" book-chapters="23"><a href="#">Book 5</a></li>
          <li class="book-entry" book-chapters="4"><a href="#">Book 6</a></li>
          <li class="book-entry" book-chapters="9"><a href="#">Book 7</a></li>
        </ul>
      </div>
      <div class="col-12 chapter-list-container">
        <h4 id="book-title"></h4>
        <ul id="chapter-list"></ul>
      </div>
    </div>
  </div>
</div>

CSS

a, a:visited, a:active, a:hover{
  color: #fff;
}
.search-col{
  height: 28px; 
  background: #561b14;
  padding: 12px;
}

ul{
  list-style: none;
  padding-left: 20px; 
  margin: 0; 
}

.book-list-container{
  background: #561b14;
  display: none; 
}

.chapter-list-container{
  background: #000;
  overflow: hidden; 
  display: none; 
}

#book-list {
  height: 0;
  width: 500px;
}

#book-title{
  color: #fff;
  margin-left: 12px; 
}

#chapter-list li {
  float: left;
  padding: 12px; 
  border: 1px solid #ccc;
  margin-bottom: 10px; 
}

JavaScript

$(document).ready(function () {

  // prevents a hyperlink from loading the href resource 
  function preventHyperlinkAction(e) {
    e.preventDefault();
    e.stopImmediatePropagation();
  }

  // toggle the book list 
  $('#init-dropdown').click(function (e) {
    preventHyperlinkAction(e);
    let bookList = $('.book-list-container');
    bookList.toggleClass('active');
    if (bookList.hasClass('active')) {
      bookList.show();
      bookList.animate({ height: 150 }, 350);
    } else {
      $('.chapter-list-container').hide();
      bookList.animate({ height: 0 }, 350, function () {
        bookList.hide();
      });
    }
  });

  // select a chapter from a book
  $('.book-entry').click(function (e) {
    preventHyperlinkAction(e);
    let chapterListContainer = $('.chapter-list-container');
    let chapterList = $('#chapter-list');
    chapterList.empty(); 
    $('#book-title').text($(this).text()); 
    let chapters = $(this).closest("li").attr("book-chapters");
    for (let i = 0; i < chapters; i++) {
      let li = $('<li><a href="#">' + i + '</a></li>'); 
      chapterList.append(li); 
    }
    chapterListContainer.show();
  });
});