Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2011
    Location
    New Hampshire, USA
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    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

  • #2
    New Coder
    Join Date
    Dec 2011
    Location
    New Hampshire, USA
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Anyone willing to help? I'm still stuck...thank you!


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •