I was just working with this so thought I would write and quick a quick blog post about it. It was covered a bit on http://www.learningjquery.com/2006/09/slicker-show-and-hide but hidden in the comments so I though I would bring it out for all to see. Thanks to Scott for the original explanation.
Most of you will know the basic JQuery function for toggling an item open or closed…
$(document).ready(function() {
$('[class^=toggle-item]').hide();
$('a.link').click(function() {
$('.toggle-item-').toggle();
});
});
Pretty straight forward stuff, once the page has loaded hide all elements on the page that have the class “toggle-item”, grab the link with class=”button” and use this to toggle the element with class=”toggle-item” open and closed, done deal. But what about if we want to do this for multiple items on the page and not call each item on its own and create a bunch of unnecessary code, we need a way to dynamically pick each element we want to show and hide.
One option is to use the JQuery ‘^’ selector, basically enabling us to pick any elements that begin with the class we choose e.g.
$('[class^=link]')
Would pick any elements on the page that begin with class=”link…”. Using this we can add out unique identifier to the element to signify it as being individual. So lets look at this a little deeper, say you have three elements on the page you want to show/hide, you’ll have three links to perform each action.
< a href="#" class="link1" >Link 1< / a >
< a href="#" class="link2" >Link 2< /a >
< a href="#" class="link3" >Link 3< /a >
<div class="toggle-item-link1">Content</div>
<div class="toggle-item-link2">Content</div>
<div class="toggle-item-link3">Content</div>
First thing we are going to do is hide all the elements on the page, using the JQuery selector above we close all the elements that begin with the class “toggle-item”
$(document).ready(function() {
$('[class^=toggle-item]').hide();
});
Next we tell the DOM which links perform the toggle action. Again using the JQuery selector we grab all the links on the page that begin with the class “link”. We then create a variable that wraps the link itself in an object and get the class of the particular link that was clicked.
$(document).ready(function() {
$('[class^=toggle-item]').hide();
$('[class^=link]').click(function() {
var $this = $(this);
var x = $this.attr("className");
});
Now we have this all we need to do is append of unique class identifier using the variable to the toggle item so its relates to the link that was clicked e.g.
$(document).ready(function() {
$('[class^=toggle-item]').hide();
$('[class^=link]').click(function() {
var $this = $(this);
var x = $this.attr("className");
$('.toggle-item-' + x).toggle();
return false;
});
});
And there you have it, you can now traverse the DOM and pick out all the toggles you need in one simple bit of Jquery.
Bookmark this
