Collapsible menu for dynamic page

[feloniouscaper]

Hello everyone,

So there are a ton of different options on the web for building a collapsible menu (ie click expand to see full list, and collapse to hide the list) however, all of these scripts have one thing in common. They're based off of the lists class or ID.

This is where my problem arises. I have a php page that calls x number of rows from a database and then outputs those rows for the user to view in a table. I want just one field in the table to be collapsible, and just because you expand a field in one row, the fields in the other rows should not be expanded. I'm not sure if you see where my dilemma is but if the solution is class or id based i can't sit here and predefine each row as a separate class or ID mainly because I don't know how many rows there will be at any given time.

Here is the most basic example,
my javascript

<style type="text/css">
 .row { vertical-align: top; height:auto !important; }
 .list {display:none; }
 .show {display: none; }
 .hide:target + .show {display: inline; }
 .hide:target {display: none; }
 .hide:target ~ .list {display:inline; }
 @media print { .hide, .show { display: none; } }
 </style>

My html:

<div class="row">
 <a href="#hide1" class="hide" id="hide1">Expand</a>
 <a href="#show1" class="show" id="show1">Collapse</a>
 <div class="list">
 <ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 </ul>
 </div>
 </div>

For one instance this works, but if i do multiples only the first expands and collapses.

[sudhakar1]

Hi
Try this code

    <div class="row">
   
<ul>

    <li> <a href="#hide1" class="hide">expand </a></li>
        <li> <a href="show" class="show">Collapse </a></li>

     <li>Item 1</li>
     <li>Item 2</li>
     <li>Item 3</li>
     </ul>
     </div>


$('.hide').click(function(){
    var collapse_content_selector = $(this).closest('ul').find('.nav1');                   
    var hide_switch = $(this);

    $(collapse_content_selector).toggle(function(){
      if($(this).css('display')=='none'){
        toggle_switch.html('Example <span class="hide"></span>');
      }else{
        toggle_switch.html('Example <span class="show"></span>');
      }
    });
    return false;
  });