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
Expand|Select|Wrap|Line Numbers
- <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>
Expand|Select|Wrap|Line Numbers
- <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>