jQuery addClass example

Change class name on click in jQuery

by Zer00ne Null

HTML

<main id='doc'>

  <article id='p1' class='p'>

    <nav class='nav'>
      <a class="link x off" href="#p2">Next</a>
    </nav>

    <section class="main">
      <button class="more x off"></button>
    </section>

    <section class="content x off">
      <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>

      <p>I am alone, and feel the charm of existence in this spot, which was created for the bliss of souls like mine.</p>

      <p>I am so happy, my dear friend, so absorbed in the exquisite...</p>
    </section>

    <footer class='foot'>
      <b>1</b>
    </footer>

  </article>

  <article id='p2' class='p'>

    <nav class='nav'>
      <a class="link x off" href="#p1">Prev</a>
      <b>|</b>
      <a class="link x off" href="#p3">Next</a>
    </nav>

    <section class="main">
      <button class="more x off"></button>
    </section>

    <section class="content x off">
      <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.</p>

      <p>He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p>

      <p>The bedding was hardly...</p>
    </section>
    <footer class='foot'>
      <b>2</b>
    </footer>
  </article>

  <article id='p3' class='p'>
    <nav class='nav'>
      <a class="link x off" href="#p2">Prev</a>
    </nav>

    <section class="main">
      <button class="more x off"></button>
    </section>

    <section class="content x off">
      <p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog.</p>

      <p>Junk MTV quiz graced by fox whelps. Bawds jog, flick quartz, vex nymphs.</p>

      <p>Waltz, bad nymph, for quick jigs vex! Fox nymphs grab quick-jived waltz. Brick quiz whangs jumpy veldt fox. Bright vixens jump; dozy fowl quack.</p>
   ...

CSS

html {
  overflow-y: scroll;
  overflow-x: hidden;
}

html,
body {
  background: #fff;
  padding: 20px;
  font: 400 small-caps 16px/1.45 Arial;
}

main {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

article {
  background: none;
  display: table;
  width: 100%;
}

nav,
section,
footer {
  background: #222;
  color: #fc3;
  padding: 20px;
  text-align: center;
  font-size: 1rem;
  
  margin: 0 auto;
  width: 300px;
}

nav {
  padding: 10px 20px;
  margin: 0em auto -0.5em;
  border-top-right-radius: 8px;
  border-top-left-radius: 8px;
}

section p {
  text-align: left;
}

footer {
  padding: 15px 20px 10px;
  margin: -2.8em auto 2.25em;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
}

.link,
footer b {
  font-size: 1.5rem;
  color: #fc3;
}

nav b {
  display: inline-block;
  font-size: 1.5rem;
  width: 1em;
}

button {
  background: #fc3;
  color: #000;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font: inherit;
  font-size: 1.2rem;
  cursor: pointer;
  width: 150px;
}

.content.off {
  max-height: 0;
  font-size: 0;
  color: transparent;
  opacity: 0;
  transition: color 0.65s, max-height 0.95s, font-size 0.95s, opacity 2.5s;
}

.content.on {
  height: auto;
  max-height: 5000px;
  font-size: 1.1rem;
  opacity: 1;
  transition: all 0.75s;
}

.more.off::before {
  content: 'More Info';
}

.more.on::before {
  content: 'Simplify';
}

JavaScript

$('.more').on('click', function() {
  var page = $(this).closest('.p').attr('id');
  $(`#${page} .x`).toggleClass('on off');
});

$('.link').not('.on').on('click', function() {

  /*
  var page = $(this).closest('.p').attr('id'); 
  $(`#${page} .x`).addClass('on').removeClass('off');
  */
  
  var jump = $(this).attr('href');
  $(`${jump} .x`).addClass('on').removeClass('off');
  
  $('html, body').animate({
    scrollTop: $(jump).offset().top
  }, 550);
});