in your case you can use:
$('span[id^sp_span]') to get all span with id starting with sp_span
then you can get the id when is clicked
$('span[id^sp_span]').click(function(){
var spanID = $(this).attr('id').split('_')[1] ;will give you span1,
span2 etc
$('#'+spanID).slideToggle(slideSpeed);
});
On Jul 25, 4:37 pm, Blake <stickynote...@gmail.com> wrote:
> 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
