JQuery Toggle in a Loop? [Answered]

[Nori]

I was wondering how one would go about getting a toggle-able show/hide code, activated by a click of a link or image or button (not too picky on what triggers it really), for custom pages.

I used this as an example to start experimenting and discovered that when using it, it hid the 'Welcome' and 'Login/out' section of the navigation area and then completely broke the editor. I was unable to edit zones.

Is there some way that I can achieve the same effect with something else?

[Tumbleweed]

When you use that code you linked to you need to leave off any html tags or body tags. So all you'd need is what I posted belowe and you need to change the button to something else (I changed it to the id "my_clicker") because ProBoards using the button tag. So all you'd need is this:



<script>
$(document).ready(function(){
$("#my_clicker").click(function(){
$("p").toggle();
});
});
</script>

And then your html: (Instead of the Toggle text you could put an image there.)


<div id="my_clicker">Toggle</div>
<p>This is a paragraph with little content.</p>

[Nori]

Hahah, that would make sense wouldn't it. Silly me.

Though this still also hides the 'Welcome <user>' & Logout bit at the top of the forum when used. Or a bunch of other stuff if I attempt to use other block elements instead of a paragraph... Is there a better way to accomplish this effect? I had been planning to use several show/hide's on the page but I don't think it will really work if other necessary things on the page disappear when used.

Is there perhaps a way to be able to collapse/expand zones for a custom page just like the collapse category plugin?

Thanks p????lq?n?!

[Nori]

Ah hah, *best use of work ever... yay slow days*

Got this working pretty much just the way I need it to. Yay no hiding things that shouldn't be hidden xP

Once again many thanks!

[Nori]

And am back! @.@

Is there a reason a simple for loop (or a while for that matter...) doesn't work in the script? I have like 30 of these little sections that I want to be able to hide/expand and thought it would be trivial but whenever I attempt to put the toggle bit within any loop the code never activates.

for (var i=0; i < 2; i++ {
    $(document).ready(function(){
        $("#tog-" + i).click(function(){
            $("#span-" + i).slideToggle('slow');
            return false;
        });
    });
};

On the actual page I have two test sections, one id'd with 0 and one with 1 (in addition to the tog or span as appropriate), but no matter what kind of loop I wrap that toggle bit in the loop never happens. Loops are easy D: I've forgotten a lot about codin' but thought this would be trivial XD

I can use var i as static and everything works.. but then it's static and that gets ugly when I want a few dozen entries.

Edit: Just thought I'd include the other part in case it's useful... (only 1 instance, these would be repeated with incremental id's)

<a href="#" id="tog-0"><font size="4">Click to Show/Hide</font></a>
<div id="span-0" style="display:none;">
various 'complicated' things
</div>

[Nori]

bump

*Edit: Haha, well new problem... Even if I copy-paste and just change the id values accordingly I get this weird problem all the footer stuff (Click here to remove banner ads... This forum hosted by... etc) moves to the top of the page... and if I refresh the custom page editor and go to edit my 2nd instance of this toggle everything below it disappears. It doesn't get erased, after commenting out the toggle parts everything comes back.

Anyone have any alternate ideas even on how I could accomplish this effect?

[Nori]

bump

[Wormopolis]

Did you figure this out? I can give you some easy jquery to do this if you still want it

[Nori]

I have not figured it out yet, haven't had as much time to delve into it as I'd like lately, so that would be spectacular if you could send some jquery my way!

[Nori]

Still interested in this if anyone has a solution

[Nori]

bump

[Quozzo]

Never put the document ready function inside a loop, you should put all your code in the ready function. If you need to have a spoiler multiple times then try using a class name instead of an ID.


$(function(){  //shorthand for $(document).ready (function (){
  $('.tog').click (function (){
     var $this = $(this);
     $this.next().toggle();
     return false;
  });
});

<a href='#' class='tog'>Toggle me </a>
<div>Lorem ipsum </div>

<a href='#' class='tog'>Toggle me </a>
<div>Lorem ipsum </div>

<a href='#' class='tog'>Toggle me </a>
<div>Lorem ipsum </div>

You can have as many as you like.

[Nori]

Looks fantastic, will give it a try after work. I'm not very savvy when it comes to this sorta coding so your comments are much appreciated.

[Nori]

I just realized I completely forgot to come back here. Quozzo your method worked perfectly! Infinite thanks; even if it is a bit delayed.

[Quozzo]

Yeah no worries. Glad I could help.