jQuery addClass example

Change class name on click in jQuery

HTML

<form action="index3.php" method="get">
        <div class="book-group">

            <h3>Title of book :  Book Name 1</h3>

            <div class="hide pad-bottom author">
                Author's Name 1
            </div>
            <div class="hide pad-bottom group">
                This Books Group1
            </div>
            <div class="hide pad-bottom theme">
                This books theme 1
            </div>

            <a href="#" class="reveal" data-reveal="author">Reveal Author</a>
            <a href="#" class="reveal" data-reveal="theme">Reveal Theme</a>
            <a href="#" class="reveal" data-reveal="group">Reveal Group</a>
            <a href="#" class="reveal-next">NEXT</a>
        </div>
        
        <div class="book-group">

            <h3>Title of book :  Book Name 2</h3>

            <div class="hide pad-bottom author">
                Author's Name 2
            </div>
            <div class="hide pad-bottom group">
                This Books Group2
            </div>
            <div class="hide pad-bottom theme">
                This books theme 2
            </div>

            <a href="#" class="reveal" data-reveal="author">Reveal Author</a>
            <a href="#" class="reveal" data-reveal="theme">Reveal Theme</a>
            <a href="#" class="reveal" data-reveal="group">Reveal Group</a>
            <a href="#" class="reveal-next">NEXT</a>
        </div>
    </form>

CSS

* {
  font-family: Arial;
}
.hide {
        display: none;
    }
    .pad-bottom {
        padding-bottom: 1em;
    }
    a:link,
    a:visited {
      background-color: green;
      float: left;
      clear: both;
      padding: 0.5em;
      font-size: 1.2em;
      border-radius: 3px;
      text-decoration: none;
      color: #FFF;
      transition: background-color 0.5s;
      margin: 0.2em;
    }
    .book-group {
      display: flex;
      flex-direction: row;
      margin: 0.5em;
      padding: 0.5em;
      border-top: 1px solid #ccc;
    }

JavaScript

$(function(){
        $(".reveal").on('click', function(e) {
            e.preventDefault();
            $(this).parents('.book-group').find('.'+$(this).data('reveal')).fadeIn('fast');
        });
    });