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

That depends on what you want to happen with the hidden divs.

Suppose you have added a <button>-<button> to every ".myPanel" div.
<div class='myPanel'>1<button>-</button></div>

Scenario 1: hidden divs stay hidden and the next unopened div is shown

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

Scenario 1.1: hidden divs are removed from the DOM

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

-or-

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

Scenario 2: hidden divs are opened again, before the next unopened div is shown

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

by(e)
Stephan

2009/1/29 Kevin Rodenhofer <krodenhofer@gmail.com>:
> Not bad at all...if I "remove" them with slideUp, in succession, how would I
> do that?
>
> On Wed, Jan 28, 2009 at 7:39 AM, Stephan Veigl <stephan.veigl@gmail.com>
> wrote:
>>
>> 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?
>> >
>
>