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).