Delete class when switch button is pressed

Question

The name is curled a little. A brief description of the violin is that it is a harmonious accordion in which the switching state changes color when switching one of the divs. I have work on where, if another div switches, it closes the previous div and opens a new div when the switching state changes.

The problem that I am facing is that the user wants to close the current switch without clicking another div, he closes the current switch, but does not switch the switching state back to its original state. I am currently using thisand trying several things, including a container 'is: visible'or hasClass, then remove the switch class, but nothing works. I also tried another function slideToggle, but of course applied it to the switchable element that I found.

Fiddle: http://jsfiddle.net/NFTFw/1256/

What am I trying to do?

I want the current switch class to return to its original state if the user clicks on the current selected div or another div. Therefore, in essence, I want the user to have either an option.

CODE:

  $(document).ready(function () {
      $('.column').each(function (index) {
          $(this).delay(750 * index).fadeIn(1500);
      });
      $('.column').hide();
      $('.body').hide();
      $('.column').each(function () {
          var $toggle = $(this);
          $('.toggle', $toggle).click(function () {
              $(".toggle").removeClass("toggle-d");
              $(this).addClass('toggle-d');
              $body = $('.body', $toggle);
              $body.slideToggle();
              $('.body').not($body).hide();
          });
      });
  });

Answer 1

Make sure the class you click on is already there. If so, delete it; if not, add it. I suspect the problem with hasClass()is that you tried to check for the wrong one this.

Oooh I did a bad job and did not delete the class when a new div was pressed. I fixed this and updated jsfiddle

jsfiddle

JS:

$(document).ready(function () {
      $('.column').each(function (index) {
          $(this).delay(750 * index).fadeIn(1500);
      });
      $('.column').hide();
      var width = $(window).width();
      if (width <= 600) {   
      $('.body').hide();
      $('.column').each(function () {
          var $toggle = $(this);
          $('.toggle', $toggle).click(function () {
              if($(this).hasClass('toggle-d')){
                $(this).removeClass("toggle-d");
              }
              else{
                $('.toggle').removeClass('toggle-d');
                $(this).addClass('toggle-d');
              }
              $body = $('.body', $toggle);
              $body.slideToggle();
              $('.body').not($body).hide();
          });
      });
      }
  });