Collapse all tabs in an accordion (not jQuery UI)

Question

I made a little accordion which works fine, but I'd like to add the functionality that you also can close all boxes.

In this DEMO you can see, that there is never more than one box open. See the jQuery code below:

$(function() {
  $('.job_content .job_description_box').hide();
  $('.job_box:first').addClass('active').next().slideDown('slow');
  $('.job_box').click(function() {
    if($(this).next().is(':hidden')) {
        $('.job_box').removeClass('active').next().slideUp('slow');
        $(this).toggleClass('active').next().slideDown('slow');
        $(".downarrow", this).toggleClass( ".uparrow" );
    }
  });
});

Now if you click on the opened box it should collapse. This was my try, which unfortunately doesn't work:

if($(this).find('.job_description_box').is(':visible')) {
  $(this).slideUp('slow');
}

–––

For those who looked at the demo: I'm talking about the blue job boxes at the bottom.

Answer 1

    if($(this).next().is(':hidden')) {
        $('.job_box').removeClass('active').next().slideUp('slow');
        $(this).toggleClass('active').next().slideDown('slow');
        $(".downarrow", this).toggleClass( ".uparrow" );
 }
  else
  {
    $(this).toggleClass('active').next().slideUp('slow');
  }

I have added an 'else' statement to your current 'if' statement to hide the content upon clicking the box again.

EDIT: Add this to your CSS file. This will rotate your arrow rather than using another image.

.arrow_rotate {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg); 
  -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg;
     transform: rotate(180deg);

}

Update your JQuery:

 $('.job_box').click(function() {
    if($(this).next().is(':hidden')) {
        $('.job_box').removeClass('active').next().slideUp('slow');
        $(this).toggleClass('active').next().slideDown('slow');
        $(".downarrow", this).addClass('arrow_rotate');
 }
 else
  {
    $(this).toggleClass('active').next().slideUp('slow');
                $(".downarrow", this).removeClass('arrow_rotate');
  }

This should now do as you require.