I'm sorry for posting yet again, but it appears I may be able to use a
for loop. Here is what I have (jQuery):
----------
for (i=0;i<sections.length-1;i++) {
$("span#sp_"+sections[i]).click(function() {
$("span#"+sections[i]).slideToggle(slideSpeed);
$("span.contentSpan:not(#"+sections[i]+")").slideUp(slideSpeed);
});
}
----------
However (I have three spans), whenever I click on toggle span 1 or 2,
the contents of content span 3 are shown, and nothing happens when I
click on toggle span 3.
A working example of this can be found here:
http://willhostforfood.com/?Action=download&fileid=76633
On Jul 26, 10:36 am, Blake <stickynote...@gmail.com> wrote:
> Oh, and...can I use a for loop to give me the result I want?
>
> On Jul 26, 10:33 am, Blake <stickynote...@gmail.com> wrote:
>
> > 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 -
