i have an array which generates The Div dynamically.Now i want to hide & show the div and 1 div should be shown at a time and to show the next div the user must be click on button.something like this:

<?php $h=0;?>
<script stype="textjavascript">
        function test() {
          document.getElementById("set").style.display="none";

          document.getElementById("set<?php echo $h+1; ?>").style.display="block";

          }
</script>
<?php
foreach($sets as $set){ 
if($h==0)
{
?>
<div id="set">
</php } else { ?>
<div id="set<?php echo $h;?>" style="display:none;">

<p><a class="continue" href="#" onclick="test()">Continue</a></p>
</div>
<?php $h++; } } ?>

Now using the above code i can able to hide and show the 2 div but in the case of 3 div it is not working,please let me know where i am doing wrong.

i have an array which generates The Div dynamically.Now i want to hide & show the div and 1 div should be shown at a time and to show the next div the user must be click on button.something like this:

<?php $h=0;?>
<script stype="textjavascript">
        function test() {
          document.getElementById("set").style.display="none";

          document.getElementById("set<?php echo $h+1; ?>").style.display="block";

          }
</script>
<?php
foreach($sets as $set){ 
if($h==0)
{
?>
<div id="set">
</php } else { ?>
<div id="set<?php echo $h;?>" style="display:none;">

<p><a class="continue" href="#" onclick="test()">Continue</a></p>
</div>
<?php $h++; } } ?>

Now using the above code i can able to hide and show the 2 div but in the case of 3 div it is not working,please let me know where i am doing wrong.

• php
• javascript
• show-hide

7 Answers 7

Try this code.

<?php
$sets = array('one','two','three','four');
?>
<script stype="textjavascript">
    var current = 0;
    var total = <?php echo count($sets); ?>;
    function test() {
        for(var i=0;i<total;i++)
        {
            document.getElementById("set"+i).style.display="none";
        }
        current++;
        document.getElementById("set"+current).style.display="block";
    }
</script>
<?php
foreach($sets as $key=>$set){ 
?>
<div <? if($key>0){ ?> style="display: none" <? } ?> id="set<?php echo $key; ?>">
    == <?php echo $set; ?> ==
<p><a class="continue" href="#" onclick="test()">Continue</a></p>
</div>
<?php  } ?>

Dont use PHP to achieve this. Use jQuery and a bit of logic to show and hide those divs.

You have to use this code for achieve that one

$("#div,$div2,#div3").hide();
$("#div,#div2,#div3").show();

Why don`t you make a class hidden-div{display:none;} and from php add it to the class?

Check this

 var current = 0;
 function test() {
      document.getElementById("set"+current).style.display="none";
      current++;
      document.getElementById("set"+current).style.display="block";
 }

and

...
foreach($sets as $set){ 
if($h==0){ 
  echo '<div id="set0">';
else 
  echo '<div id="set<?php echo $h;?>" style="display:none;">';

 ...

this doesn't test . but try it :

<script stype="textjavascript">
        function test(i) {
          document.getElementById("set").style.display="none";

          document.getElementById("set"+i).style.display="block";

          }
</script>

<?php
foreach($sets as $set){ 
   if($h==0)
   {?>
     <div id="set">
      <?php 
   } else { ?>
       <div id="set<?php echo $h;?>" style="display:none;">
       <p><a class="continue" href="#" onclick="test(<?php echo (($h)==count($sets)?'':$h+1);?>)">Continue</a></p>
       </div>
  <?php  
   }
$h++;
} ?>

Assuming you fix your HTML and put your closing else } before the $h++;, your PHP code will generate HTML (and Javascript) that is fixed and looks something like this:

<script>
    function test() {
        document.getElementById("set").style.display="none";
        document.getElementById("set1").style.display="block";
    }
</script>

<div id="set"></div>
<div id="set1" style="display:none;">
    <p><a class="continue" href="#" onclick="test()">Continue</a></p>
</div>
<div id="set2" style="display:none;">
    <p><a class="continue" href="#" onclick="test()">Continue</a></p>
</div>
<div id="set3" style="display:none;">
    <p><a class="continue" href="#" onclick="test()">Continue</a></p>
</div>

Notice that all three <a> tags call the same Javascript function test(), which alters the divs set and set1 and nothing else.

To remedy this situation, you can give test() a parameter (function test(id)) and associate test(<?php echo $h; ?>) with each <a> tag.