Okay, it seems to work well. Here is the jQuery that I have now:
----------
$('span[id^=sp_span]').click(function(){
var spanID = $(this).attr('id').split('_')[1];
$('#'+spanID).slideToggle(slideSpeed);
$('span.contentSpan:not(#'+spanID+')').slideUp(slideSpeed);
});
----------
First of all - what does the [1] on line 2 do? Why do [0] and [2] not
work?
On Jul 26, 9:58 am, FrenchiINLA <mamali.sohe...@gmail.com> wrote:
> sorry i got a typo error, the corrent code is:
> $('span[id^=sp_span]').
>
> On Jul 26, 8:39 am, FrenchiINLA <mamali.sohe...@gmail.com> wrote:
>
> > 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- Hide quoted text -
>
> > - Show quoted text -
