Add and Remove Class With Switching Div

by UltimateNoob

HTML

<ul class="new_member_box">
  <li class="selector">
    <a href="#Date26" class="question1">
      <div class="innerbox question1"></div>
    </a>
  </li>
  <li class="selector">
    <a href="#Date27" class="question2">
      <div class="innerbox question2"></div>
    </a>
  </li>
  <li class="selector">
    <a href="#Date28" class="question3">
      <div class="innerbox question3"></div>
    </a>
  </li>
  <li class="selector">
    <a href="#Session" class="question4">
      <div class="innerbox question4"></div>
    </a>
  </li>
</ul>

<div class="clear" class="question"></div>

<div id="answer1" class="hide">
  <h3>Date26</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum cumque minima vitae ab facilis dicta aut mollitia quasi possimus quidem?Sequi nam consectetur veritatis cumque tenetur architecto quasi obcaecati! Aliquam totam praesentium aspernatur modi
    accusantium minus sequi harum rem aperiam!</p>
</div>
<div id="answer2" class="hide">
  <h3>Date27</h3>
  <p>Sequi nam consectetur veritatis cumque tenetur architecto quasi obcaecati! Aliquam totam praesentium aspernatur modi accusantium minus sequi harum rem aperiam!Sequi nam consectetur veritatis cumque tenetur architecto quasi obcaecati! Aliquam totam praesentium
    aspernatur modi accusantium minus sequi harum rem aperiam!</p>
</div>
<div id="answer3" class="hide">
  <h3>Date28</h3>
  <p>Ipsa libero nostrum labore esse quasi doloremque possimus officiis accusamus id praesentium vitae omnis modi dicta perferendis incidunt enim nam!Sequi nam consectetur veritatis cumque tenetur architecto quasi obcaecati! Aliquam totam praesentium aspernatur
    modi accusantium minus sequi harum rem aperiam!</p>
</div>
<div id="answer4" class="hide">
  <h3>Session</h3>
  <p>Ipsa libero nostrum labore esse quasi doloremque possimus officiis accusamus id praesentium vitae omnis modi dicta perferendis incidunt enim nam!Sequi nam consectetur veritatis cumque tenetur architecto quasi obcaecati!...

CSS

.hide {
  display: none;
}

ul.new_member_box {
  list-style-type: none;
  height: 160px;
  width: 730px;
  margin: 10px auto 0;
}

li.selector {
  height: 151px;
  width: 157px;
  margin: 0 10px;
  display: inline-block;
}

div.innerbox {
  height: 151px;
  width: 157px;
}

div.question1 {
  background-image: url("https://photos-3.dropbox.com/t/2/AADeNzeaqNmWCIsYZqUjqMgyIUk5ETC-Xn3jvvpVKTXWwA/12/1959500/png/32x32/1/_/1/2/Date26.png/ENKnyAEYtvSdNyABKAE/LVSQX_o0kSIYqNQmnobvwa6RJ_5qYROHd5gmRrI35vg?size=1280x960&size_mode=3")
}

div.question1:hover {
  background-image: url("https://photos-1.dropbox.com/t/2/AAA4tYEEMKCja-sfmGfep7bt-NIuQgz844EZExhYG-sHlw/12/1959500/png/32x32/1/_/1/2/Date26_Selected.png/ENKnyAEYtvSdNyABKAE/EOzDv8XdrkyeJCJDz3vnXHw0mZMXKCE7OypdvYfXzAU?size=1280x960&size_mode=3")
}

div.question1selected {
  background-image: url("https://photos-1.dropbox.com/t/2/AAA4tYEEMKCja-sfmGfep7bt-NIuQgz844EZExhYG-sHlw/12/1959500/png/32x32/1/_/1/2/Date26_Selected.png/ENKnyAEYtvSdNyABKAE/EOzDv8XdrkyeJCJDz3vnXHw0mZMXKCE7OypdvYfXzAU?size=1280x960&size_mode=3")
}

div.question2 {
  background-image: url("https://photos-3.dropbox.com/t/2/AADnZmYbcG_a4yG-9pzryzufpBR4pmWyfWCjk_HsV29fSA/12/1959500/png/32x32/1/_/1/2/Date27.png/ENKnyAEYtvSdNyABKAE/OPEy_jIUMQ_Rtn9BIra-eIrWsrzPl5lpsG2ETKgHgwU?size=1280x960&size_mode=3")
}

div.question2:hover {
  background-image: url("https://photos-6.dropbox.com/t/2/AACB8rLIVf0tDTdhuyyEetBxxhNBDNcKSAW38GAaGZypFw/12/1959500/png/32x32/1/_/1/2/Date27_Selected.png/ENKnyAEYtvSdNyABKAE/Sx1VRQgdVdrG9HYbsPy-qxSetw2r5P5EmuvVWHvYD74?size=1280x960&size_mode=3")
}

div.question2selected {
  background-image: url("https://photos-6.dropbox.com/t/2/AACB8rLIVf0tDTdhuyyEetBxxhNBDNcKSAW38GAaGZypFw/12/1959500/png/32x32/1/_/1/2/Date27_Selected.png/ENKnyAEYtvSdNyABKAE/Sx1VRQgdVdrG9HYbsPy-qxSetw2r5P5EmuvVWHvYD74?size=1280x960&size_mode=3")
}

div.question3 {
  background-image:...

JavaScript

var appliedClass = "new_member_box_display",
  oldBox = "new_member_box_display";

$('[class^="question"]').on('click', function(e) {
  e.preventDefault();
  var numb = this.className.replace('question', '');
  $('[id^="answer"]').hide();
  $(oldBox).removeClass(appliedClass);
  appliedClass = ('question' + numb + 'selected');
  $('#answer' + numb).show();
  $('.question' + numb).addClass('question' + numb + 'selected');
  oldBox = ('.question' + numb);
});