CodingForums.com - Expand/Collapse Table Rows

Howdy!

I am trying to play with what I thought was a simple style to collapse what I will put into a tableless layout, however I can't get more than ONE to work. For example, I want to have, say 5 rows and be able to expand/collapse each one and have the flexibility to have multiple rows expanded or collapsed simultaneously. Here is the script I found (I think it's off css tricks)

Code:

<!DOCTYPE html>

<head>

   <title>menu mockup</title>

   <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

   <style type="text/css">

        .show {

          display: none; 

        }

        .hide:focus + .show {

            display: inline; 

        }

        .hide:focus { 

            display: none; 

        }

        .hide:focus ~ #list { 

            display:none; 

        }

        @media print { 

            .hide, .show { 

                display: none; 

            } 

         }

   </style>

</head>

<body>

   <p>Test</p>

      <div>



         <a href="#" class="hide">[-  hide]</a>

         <a href="#" class="show">[+  show]</a>

         <ol id="list">

            <li>item 1</li>

            <li>item 2</li>

            <li>item 3</li>



         </ol>

      </div> 

</body>

</html>

What I would like would be several instances of hide show, like this:

+ SOME CONTENT
+ SOME OTHER CONTENT
- EXPANDED CONTENT
this is some expanded content
+ OTHER CONTENT
- EXPANDED CONTENT
this is some expanded content
+ LAST ROW OF CONTENT

I thought it would be as simple as adding an class/id for each (and reflecting in the HTML), but it doesn't want to work with me. This is what I tried for two rows:

Code:

   <style type="text/css">

        .show,

        .show_1 {

            display: none; 

        }

         .hide:focus + .show,

         .hide:focus_1 + .show_1 {

             display: inline; 

        }

         .hide:focus,

         .hide:focus_1 { 

             display: none; 

        }

         .hide:focus ~ #list,

         .hide:focus_1 ~ #list_1 { 

            display:none; 

        }

        

        @media print { 

            .hide, .show,

            .hide_1, .show_1 { 

               display: none; 

            } 

         }

I'm not sure if I am misusing the ~ selector, a typo somewhere, or if I'm just way off base all together. I know it's essentially like a collapsible menu, I just can't get this solution to work the way I want. Can anyone help expand on this solution to get me on the right path please? Thanks in advance for taking a look!

-LT