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:
Post a Comment