JS - Toggle all DIVs

Question

My issue involves multiple DIVs that display:block or display:none each with their own anchor tag. The main problem is that I have recommissioned the JS code that runs this feature without completely understanding it. All I need is a way to toggle all of the DIVs with a single "Show All/Hide All" link. I cannot wrap my head around it.

I have tried absolutely everything that my exceptionally limited grasp will allow - which consists mostly of swinging my arms in the dark and hoping I accidently build a miracle. Since that hasn't worked I am shamefully seeking help.

The only thing that makes this question unique are all the variables with this specific issue -

An (almost) working example can be found at: www.robertmeans.com/menu.htm

The JS code:

imageX01='plus';
imageX02='plusEven';

function toggleOdd(ee){
imgX="imagePM"+ee;
divX="div"+ee;
imageX="imageX"+ee;
divLink="divHref"+ee;
imageXval=eval("imageX"+ee);
element = document.getElementById(divX).style;
if (element.display=='none') {element.display='block';}
else {element.display='none';}
if (imageXval=='plus') {document.getElementById(imgX).src='_images/minus.gif';eval("imageX"+ee+"='minus';");document.getElementById(divLink).title='Hide Content';}
else {document.getElementById(imgX).src='_images/plus.gif';eval("imageX"+ee+"='plus';");document.getElementById(divLink).title='Show Content';}
}

function toggleEven(ee){
imgX="imagePM"+ee;
divX="div"+ee;
imageX="imageX"+ee;
divLink="divHref"+ee;
imageXval=eval("imageX"+ee);
element = document.getElementById(divX).style;
if (element.display=='none') {element.display='block';}
else {element.display='none';}
if (imageXval=='plusEven') {document.getElementById(imgX).src='_images/minusEven.gif';eval("imageX"+ee+"='minusEven';");document.getElementById(divLink).title='Hide Content';}
else {document.getElementById(imgX).src='_images/plusEven.gif';eval("imageX"+ee+"='plusEven';");document.getElementById(divLink).title='Show Content';}
}

The HTML

<div id="task_item01">
    <a href="javascript:toggleOdd('01')" id="divHref01"><img src="_images/plus.gif" alt="" name="imagePM01" width="33" height="33" border="0" class="task_itemPlusImage" id="imagePM01" /></a>
    <a href="javascript:toggleOdd('01')">Div #1</a>
</div>

<div style="display:none;" id="div01">
    Content 1
</div>

<!-- ********************************  Item 1 End  **************************** -->
<!-- ********************************  Item 2 Start  ************************** -->

<div id="task_item02">
    <a href="javascript:toggleEven('02')" id="divHref02"><img src="_images/plusEven.gif" alt="" name="imagePM01" width="33" height="33" border="0" class="task_itemPlusImage" id="imagePM02" /></a>
    <a href="javascript:toggleEven('02')">Div #2</a>
</div>

<div style="display:none;" id="div02">
    Content 2
</div> 

I have spent countless hours trying to work this out on my own. Any help is deeply appreciated.

Answer 1

Ok first of all, it seems like way too much code to me... you can do this very easily by using jQuery. I have made an example here: http://jsfiddle.net/Nr2f6/4/

Here is some simple html to help you better understand what is being done:

<div id="item-1"><span class="plus"></span>Open these items</div>
<div class="contents" data-rel="item-1">
    I have superb items in this div... the world is about to understand just how awesome I am!
</div>

<div id="item-2"><span class="plus"></span>Open these other items</div>
<div class="contents" data-rel="item-2">
    I have amazing contents in this div. I want to show them to the world!
</div>

as you can see above, there is no inline css. All the styling (display: none) should be placed separately, to not conflict with what you are trying to do. So simply place it in a separate css file.Then run this code:

  $("div[id^=item]").click(function(){
   var reference2open = $(this).attr("id");
   //get the data-rel attribute associated
   $("div[data-rel='"+reference2open+"']").slideToggle();
   $("span",this).toggleClass('minus');
});

$("#all").click(function(){
    if($(this).hasClass('close')){
       $("div[data-rel^=item]").slideUp();
       $("div[id^=item] span").removeClass('minus');
       $("#all").removeClass('close');
        $("#all").html('open them all');
    }else{
    //open and close them all by clicking
    $("div[data-rel^=item]").each(function(){
        if($(this).is(':hidden')){
            $(this).slideDown();
            $("div[id^=item] span").addClass('minus');
            $("#all").html('close them all');
        }
    });
    //change the button to close
    $("#all").addClass('close');
    }
    //$("div[id^=item] span").toggleClass('minus');
});

****ADDED IN THE TOGGLE PLUS AND MINUS SIGNS USING CSS****

.plus{
    background: url(http://www.robertmeans.com/offsite_files/code_help/_images/plus.gif);
    width: 33px;
    height: 33px;
    display: inline-block;
}
.minus{
    background: url(http://www.robertmeans.com/offsite_files/code_help/_images/minus.gif);
    width: 33px;
    height: 33px;
    display: inline-block;
}

Do not forget to include your jQuery file! Hope this helps :)

Just wanted to add in some details for better understanding:

div[id^=item]: Is saying whenever a div is clicked that has an id that starts with (^=) item, run the code.

$("div[data-rel='"+reference2open+"']").slideToggle(): is saying take the id from the div that was clicked and find the content box where with the same name but in the data-rel attribute. The slide it down, if it is already down, slide it back up (toggle). You do not have to use a slide effect, I just thought it was more fun!

Then last but not least, the function you were looking for: How to open them all at once. Again we are using the (^=) to find all of the divs.

$("div[data-rel^=item").slideToggle();: So here we are saying to jQuery, hey toggle all the boxes that have a data-rel attribute that starts with (^=) item.

This last part is pretty neat, because you can create many instances of the item-? boxes and this code will work for any number of them. You can also add the same code to a different div, like even and odd, and toggle all the even and all the odd elements accordingly.