jQuery addClass example

Change class name on click in jQuery

HTML

<nav>
  <a class="pcnav navlinks" href="#aboutus-target">About Us</a>
</nav>

<div id="banner-message">
  <p>Hello World</p>
  <button id="more" target="1">More Info</button>
</div>

<div id="expanded1" class="p2">
  <p>
    This is the content for the expandable section.
  </p>
  <p>
    This is the content for the expandable section.
  </p>
  <p>
    This is the content for the expandable section.
  </p>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

nav,
.p2,
#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto 1em;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

JavaScript

$('.p2').hide();

$('#more').click(function (ev) {
  var t = ev.target
  $('#expanded' + $(this).attr('target')).toggle(50, function(){
    console.log(ev.target)
    $(t).html($(this).is(':visible')? 'Simplify' : 'More Info')
  });
  return false;
});

$('a[href="#aboutus-target"]').click((ev) => {
  ev.preventDefault();
  const $more = $('#more');
  const $targ = $('#expanded' + $more.attr('target'));
  
  // only if the target is not visible
  if( !$targ.is(':visible') ) {
    $more.trigger('click');
  }
});