Question

I have the following simple demo here: https://tinker.io/8e585/1. I have attached code below.

Initially, the contents of both ‘Test 1’ & ‘Test 2’ are closed.

However, when clicked, they open. I would like it, if when one is open and then clicked it closes. So, if open AND clicked = close. Is this possible?

Many thanks for any helpers with this 🙂

..

HTML

<div class="grid_4">    
    <h2 style="margin-bottom:4px"><a href="javascript:slideonlyone('newboxes6');" style="color:#455560!important;">Test 1</a></h2>
    <div class="newboxes2" id="newboxes6">
        <p>bla 1</p>
    </div>
</div>

<div class="grid_4">    
    <h2 style="margin-bottom:4px"><a href="javascript:slideonlyone('newboxes7');" style="color:#455560!important;">Test 2</a></h2>
    <div class="newboxes2" id="newboxes7">
        <p>bla 2</p>
    </div>
</div>

CSS

.newboxes2 {display:none}

jQuery

function slideonlyone(thechosenone) {
     $('.newboxes2').each(function(index) {
          if ($(this).attr("id") == thechosenone) {
                jQuery(this).parent('.grid_4').children().find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_onstate.png');
               $(this).slideDown(200);
          }
          else {
                jQuery(this).parent('.grid_4').children().find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_offstate.png');
               $(this).slideUp(600);
          }
     });
}

Answer 1

You can simply use a class to do it:

https://tinker.io/8e585/12

function slideonlyone(thechosenone) {
     $('.newboxes2').each(function(index) {
          if (this.id == thechosenone) {
                if($(this).is('.active') )
                   $(this).removeClass('active').slideUp(600);
              else 
              $(this).addClass('active').slideDown(200);
          }
          else              
               $(this).removeClass('active').slideUp(600);

         if($(this).is('.active') )
             jQuery(this).parent('.grid_4').children().find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_onstate.png');
         else
             jQuery(this).parent('.grid_4').children().find('img.small').attr('src', '/wp-content/themes/boilerplate/images/image_corner_btn_offstate.png');
     });
}