jQuery Slide Toggle Multiple Items
Allow toggling of multiple items using a wrapper function, passing the text to be changed and the object(s) in the alt attribute.
by Scoobler
HTML
<a href="#" id="toggle-link" alt="Show Div;Hide Div;toggle-div,toggle-div2">Show Div</a><br/>
<div style="display:none;" id="toggle-div">
What ever needs showing!
</div>
But don't hide me!!
<div id="toggle-div2">
Something to hide!
</div>
JavaScript
// Capture the link being clicked:
$("#toggle-link").click(function() {
// Perform the toggle on the clicked object:
toggle($(this));
// Cancel the click:
return false;
});
// Function to perform the toggle:
function toggle(link) {
// Get the alt attribute from the obj:
var toggle_text = $(link).attr("alt");
// Split the attribute:
var toggle_arr = toggle_text.split(";");
// Slit the last item incase of multiple obj's to be toggled:
var toggle_objs = toggle_arr[2].split(",");
// Change the text:
$(link).text($(link).text() == toggle_arr[0] ? toggle_arr[1] : toggle_arr[0]);
// Loop through each item, toggling them:
var i = 0;
while (i < toggle_objs.length) {
$("#" + toggle_objs[i]).slideToggle();
i++;
}
}