Question

I’d like to show the first 5 names in a list and toggle the display of any additional names as a single block.

I’ve currently got the names list as an array object though I’m happy to change it to an array if the solution would be simpler with that.

Here’s what I have so far which is *in*complete because I don’t know how to create the hidden div of names:

PHP

  $names_count=0;
  echo '<div id='nameList' class='toggler'>';
  foreach($names as $name){
     echo '<a id='name'.$name->acct_id.'>'.$name->full_name.'</a>';
     if($names_count<=4){
       echo '</div><!--toggler div-->';
     } 
     else
        <div class='namesList' style='display:none'>
         //put additional names in hidden div?
        </div>          
     }
     $names_count++;
  } //endforeach 

JS:
UPDATE Sorry for the confusion. This isn’t really a javascript question so I deleted that tag but I’m including the following jQuery code snippet for completeness with the PHP

$('.toggler').click(function(){
   var id=this.id;
   $('#'+id).toggle();
});

Answer 1

PHP

$names_count = 0;
echo '<div id="nameList" class="toggler">';
foreach($names as $name) {
    echo '<a id="name' . $name->acct_id . '">' . $name->full_name . '</a>';
    if ($names_count == 4) {
        echo '</div><div class="hidden">';
    }
    $names_count++;
} 
echo '</div>';

JS

$('.toggler').click(function(){
   $(this).next().toggle();
});

CSS

.hidden {
    display: none;
}