On my site, I have some click-able spans (will be referred to as
toggle spans) that show or hide other spans (that contain the content
I want on my site; will be referred to as content spans). The layout
of these spans is like this:
----------
<span id="sp_span1">Span 1</span> - <span id="sp_span2">Span 2</span>
- <span id="sp_span3">Span 3</span>
<span class="contentSpan" id="span1">
<p>Span 1 content.</p>
</span>
<span class="contentSpan" id="span2">
<p>Span 2 content.</p>
</span>
<span class="contentSpan" id="span3">
<p>Span 3 content.</p>
</span>
----------
Then, in my jQuery I have something like this:
----------
slideSpeed=1000;
$("span#sp_span1").click(function () {
$("span#span1").slideToggle(slideSpeed);
$("span.contentSpan:not(#span1)").slideUp(slideSpeed);
});
$("span#sp_span2").click(function () {
$("span#span2").slideToggle(slideSpeed);
$("span.contentSpan:not(#span2)").slideUp(slideSpeed);
});
----------
and so on for each separate content span. What the above code does is:
for example, when toggle span 1 is clicked on, content span 1 opens if
it is not open, and if content span 2 or 3 is open, that content span
is closed and content span 1 is opened. (If that doesn't make sense, I
apologize, and a download-able example can be found here:
http://willhostforfood.com/access.php?fileid=76513 )
This method works perfectly fine, but to make it easier for me to add
more content spans, I would like to use a for loop that will
automatically enter all that for me.
What I would like to do in my jQuery is use an array that will contain
the IDs of all the different content spans I want to have displayed on
the page. Then, a for loop will enter the appropriate information
(identical to the code above). I've tried many things, but I cannot
get this to work. Here's kind of what I have:
----------
sections=new Array("span1","span2","span3");
for (i=0;i<sections.length-1;i+=1) {
$("span#"+sections[i]).click(function() {
$("span#"+sections[i]).slideToggle(slideSpeed);
//$("span.contentSpan:not(attr('id')==sections[i])").slideUp
(slideSpeed);
});
}
----------
That doesn't work, though. What I need to do is get the value of
sections[i] and use that in the element bit of the code.
Any ideas? If you need more information, please ask.
Thanks!
Blake
