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

2009-01-29 Thread Stephan Veigl 

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'1button-/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 krodenho...@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.ve...@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=myHeaderbutton+/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 krodenho...@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?

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

2009-01-28 Thread Stephan Veigl 

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=myHeaderbutton+/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 krodenho...@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?

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

2009-01-28 Thread Kevin Rodenhofer 
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.ve...@gmail.comwrote:


 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=myHeaderbutton+/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 krodenho...@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?