Show/Hide Divs with 1 button

[dfowler]

Hey guys, I'm not that great with Javascript so I'm hoping yall can help me.  I have created a javascript functionto show hide divs before, but it has always been multiple buttons.  Button 1 deals with Div 1 and so on.  Well with what I am doing now I have several divs with ids ranging from 1-10.  I want it so that when you click a button it will unhide the next div in line.

 

So the page starts off showing div 1, when the user clicks the button div 2 appears, so now you see div1 and div2, and so on....

 

Thanks for any help!

[rhodesa]

Like this?

 

<script type="text/javascript">
  function toggleShow ( ele_id ) {
    var ele = document.getElementById(ele_id);
    ele.style.display = (ele.style.display == 'none') ? '' : 'none';
  }
</script>
<div id="test1">this is block 1</div>
<div id="test2">this is block 2</div>
<input type="button" value="Toggle Block 1" onclick="toggleShow('test1');" />
<input type="button" value="Toggle Block 2" onclick="toggleShow('test2');" />

[obsidian]

I think he wants a single button to display all the divs. Try something like this:

 

First, create some divs:

<?php
for ($i = 1; $i <= 10; $i++)
{
  echo "<div id=\"mydiv_{$i}\" style=\"display: none\">I am DIV #{$i}</div>";
}
?>

 

Now, here is the JavaScript declaration for your header that can then be tied to a button:

var nextDiv = 1;
function showNext()
{
  var id = 'mydiv_' + nextDiv;
  document.getElementById(id).style.display = 'block';
  nextDiv++; // increment for next
}

 

Now, just attach that function to your button or link:

<a href="#" onclick="showNext(); return false;">Show Next DIV</a>

 

Hope that helps.

[dfowler]

Like this?

 

<script type="text/javascript">
  function toggleShow ( ele_id ) {
    var ele = document.getElementById(ele_id);
    ele.style.display = (ele.style.display == 'none') ? '' : 'none';
  }
</script>
<div id="test1">this is block 1</div>
<div id="test2">this is block 2</div>
<input type="button" value="Toggle Block 1" onclick="toggleShow('test1');" />
<input type="button" value="Toggle Block 2" onclick="toggleShow('test2');" />

 

Thanks, but that is what I've done before.  What I'm looking for is only 1 button.  Here is the exact scenario.

 

You load the page and 'div1' is displaying and a button that says "Add div".  When you click this button 'div2' unhides.  You click it again 'div3' unhides, and so on.  I'm thinking some sort of counter has to be involved, but I'm not sure how to do this correctly.

[obsidian]

You load the page and 'div1' is displaying and a button that says "Add div".  When you click this button 'div2' unhides.  You click it again 'div3' unhides, and so on.  I'm thinking some sort of counter has to be involved, but I'm not sure how to do this correctly.

 

Did you look at my sample above? I just tested it, and it works fine. The only additional thing you'll want to check for is the max number of divs to display so you're not calling the function on non-existent DIVs once they are all showing.

[dfowler]

You load the page and 'div1' is displaying and a button that says "Add div".  When you click this button 'div2' unhides.  You click it again 'div3' unhides, and so on.  I'm thinking some sort of counter has to be involved, but I'm not sure how to do this correctly.

 

Did you look at my sample above? I just tested it, and it works fine. The only additional thing you'll want to check for is the max number of divs to display so you're not calling the function on non-existent DIVs once they are all showing.

Yeah sorry, I didn't even see you posted.  It works perfectly!  I modified things just a little for what I was going for.  But thanks for your help!