jQuery addClass example

Change class name on click in jQuery

HTML

<ul>
  <li class="book" bookid="genesis">Genesis</li>
  <li class="book" bookid="daniel">Daniel</li>
</ul>
<div id= "genesis" class="chapters" style="display:none;">
  The Genesis chapters go here.
</div>
<div id= "daniel" class="chapters" style="display:none;">
  The Daniel chapters go here.
</div>

CSS

.book {
  background:red;
  color:white;
  border:1px green solid;
  cursor:pointer;
}

.chapters {
  background: pink;
  color:black;
}

JavaScript

$("body").on("click", ".book", function() {
    $(".chapters").css("display","none");
    var book_id = $(this).attr("bookid");
    $("#" +book_id).css("display","block");
});