onclick show not showing everything

[9three]

Hey,

 

I have 18 DIVs im using. 12 of those DIVs are hidden (in css). When the user clicks on "view more" the link its suppose to show all the DIVs.

 

The problem is that when I click view more, it only shows 1 more DIV instead of showing the addtional 12.

 

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
     $('#clickview').click(function () {
       $('#viewmore').show();
     });
    });
</script>
<style type="text/css">
  .wrapper {
    width: 720px;
    margin: 0px;
    padding: 0px;
  }
    .window {
     float: left;
     width: 100px;
     height: 150px;
     margin: 10px 0px 0px 10px;
     padding: 5px;
     color: #ffffff;
     background: #000000;
    }
</style>
<div class="wrapper">
<?php

$i = 0;
while ($i < 18) {
  if ($i > 5)
    echo '<div style="display: none;" id="viewmore">';
  echo '<div class="window">Hello</div>';
  if ($i > 5)
    echo '</div>';
  $i++;
}
?>
</div>

<a href="#" id="clickview">View More</a>

 

Can anyone help? thanks

[emehrkay]

ids are supposed to be unique, it looks like you have 12 divs with the id of viewmore. change that to a class and change

 

$('#viewmore').show();

 

to

 

$('.viewmore').show();

 

and it will probably work

[9three]

wow that worked! It makes sense, but I'm still shocked. I never thought that would've been the problem.

 

Thanks!