Understanding JQuery. Collapsible menu

Question

I have created a collapsible menu in JQuery with the help of some coding I've found around this site.

And everything work. But now it's time for me to understand how and why it works.

The JQuery:

jQuery(document).ready(function($) {
var submenu = $('.submenu').hide();

$('.open').click(function() {
  $this = $(this);
  $target =  $this.parent().next();

  if(!$this.hasClass('close')){
     $('.open').removeClass('close');
     submenu.slideUp();
     $this.addClass('close');
     $target.slideDown();
  }else{
     $target.slideUp();
     $this.removeClass('close');
  }
});
});

The HTML and CSS are in here: JSFIDDLE!

Can someone break the code down for me, and explain what it does.

I know that it hides my .submenu class when the page loads. And when I click the class .open the .submenu. slides down

But then I am a bit lost to what it does with my .close class.

Thanks in advance!

Answer 1

No problems :)

Let's start with this:

jQuery(document).ready(function($){});

this wraps around all jQuery code. it defines an anonymous function and attaches it to the event $(document).ready meaning - this code runs only after the entire DOM is loaded. This is needed because if the following code will run before the elements were loaded it will have no effect on them,

var submenu = $('.submenu').hide();

This line picks all elements with class="submenu", hides them - and returns an array of all submenus to the submenu variable. The rest of the explanation will be commented on each line:

$('.open').click(function() { // the following code will run if you click an element with class="open"

  $this = $(this); // $this will hold the element you clicked
  $target =  $this.parent().next(); // $target will hold the next element (relevant single submenu)

  if(!$this.hasClass('close')){ // if the current element is open (marked by class="closed")
     $('.open').removeClass('close'); // remove the "close" class from all main menu items
     submenu.slideUp(); // close all submenus
     $this.addClass('close'); // add "close" class only to the clicked main menu item
     $target.slideDown(); // open the correct submenu (the element after the clicked main menu item)
  }else{ // if current submenu is already open
     $target.slideUp(); // close it
     $this.removeClass('close'); // remove class "close" from the main menu item.
  }
});

Answer 2

When user clicks on a menu group, you need to consider two cases:

1. The clicked menu group is closed (i.e. it doesn't have the close class)

   !$this.hasClass('close')
   

   If so, you first have to close all open menus, and set their class accordingly:

   $('.open').removeClass('close');
   submenu.slideUp();
   

   Then you can expand the clicked menu group, and mark it as currently open:

   $this.addClass('close');
   $target.slideDown();
   

2. The clicked menu group is already open. The only thing that needs to be done in that case is closing the menu:

   $target.slideUp();
   $this.removeClass('close');