Wednesday, January 28, 2009

[jQuery] Re: How to use one button to toggle multiple panels in succession

I'm not sure if I realy understand what you want to do, but it could
look something like

HTML:
<div id="root">
<div class="myHeader"><button>+</button></div>
<div class='myPanel'>1</div>
<div class='myPanel'>2</div>
<div class='myPanel'>3</div>
<div class='myPanel'>4</div>
<div class='myPanel'>5</div>
</div>

JavaScript:
var myPanels = $(".myPanel").hide();
var nextPanel = 0;
$(".myHeader button").click(function(){
if (nextPanel < myPanels.length) {
$(myPanels[nextPanel++]).slideDown();
}
});

However, you may have problems if you delete or insert a panel.
A more flexible, but not so performat method would be:

(same HTML)

JavaScript:
var myPanels = $(".myPanel").hide();
$(".myHeader button").click(function(){
$(".myPanel:hidden:first").slideDown();
});

by(e)
Stephan

2009/1/27 webopolis <krodenhofer@gmail.com>:
>
> I want to have 1 "+" with x number of slide panels set to display:
> none; under it . When a user clicks the "+" a panel is revealed. Each
> time the "+" is clicked, the next panel is revealed, and so on. Each
> panel will have a "x" that can be clicked to close itself.
>
> I figure I would have to create an array for my collection of DIVs,
> then with clicks, iterate through each one until I have the desired
> number of panels revealed, or, I reach the end of the array.
>
> I just have no idea how to begin with this.
>
> Am I making any sense?
>

No comments: