Show/hide a div with jquery multiple times

Question

I am wanting to use jquery to do a show/hide of a DIV from a text link.

What makes it a little different from the examples I have found of this site so far is I need a generic way of doing it multiple times on 1 page and also able to use it sitewide on anypage.

It would be really nice if I can put the JS in seperate file that is included into the pages, so maybe it can be wrapped into a function?

Can someone help me here? For making it generic it could be where I assign a div that is shown/hidden with an id like id="toggle-hide-1" and just change the numbers in my page to make it a different show/hide area

I could just name the ID using a name that will make the function show/hide a div and to seperate it from other divs that show/hide on a page I could add a number to it.

below is partial code that will do a show/hide of a div on a link click but is not exactly what I need.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" >
$(function() { 
    $(".view-code").click(function(evt) {
        $(".tool_block, .view-code").toggle();
    }); 
});
</script>
<a href="#" class="view-code" >view code</a>
<a href="#" class="view-code"  style="display:none">hide code</a> <br  />

<div class="tool_block" style="display:none" >
this stuff is hidden until we choose to show it!
</div>

Answer 1

The best approach is probably going to be something using custom attributes. If you markup your anchor with an attribute that tells the jquery which div to toggle, it will be easier to write generic code to do the work.

Something like this:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" >
$(function() { 
    $(".view-code").click(function(evt) {
        var d = $(this).attr("toolDiv");
        $(".tool_block[toolDiv=" + d + "], .view-code[toolDiv=" + d + "]").toggle();
    }); 
});
</script>
<a href="#" class="view-code" toolDiv="1" >view code</a>
<a href="#" class="view-code" toolDiv="1" style="display:none">hide code</a> <br  />

<div class="tool_block" toolDiv="1" style="display:none" >
this stuff is hidden until we choose to show it!
</div>

Then give each of your anchor-div pairs a unique toolDiv value (doesn't have to be a number).

Answer 2

If you could wrap the whole collection in a div, it would make it pretty easy.

$(function() {
    $(".view-code").click( function(e) {
        $(this).siblings().andSelf().toggle();
    });
});

<div>
    <a href="#" class="view-code" >view code</a>
    <a href="#" class="view-code"  style="display:none">hide code</a> <br  />

    <div class="tool_block" style="display:none" >
    this stuff is hidden until we choose to show it!
    </div>
</div>

If it doesn't handle the <br />, you could filter the siblings to only div and anchor elements.

Answer 3

Why not use specific classes instead? Each element you want shown/hidden can have a class called "toggler," as in:

<div class="toggler">
 ...
</div>

You can then toggle the visibility of ALL elements with this class at once, with:

$(".toggler").toggle();

In this scenario, it doesn't make a difference where in the document these elements reside or even what kind of elements they are.

If this functionality needs to be available globally, you can always extend jQuery itself with a custom function, as in:

$.toggleTogglers = function(toggleClass) {
  $("." + toggleClass).toggle();
};

This is nice in that you have flexibility to choose a toggle custom class of your own design.