dcsimg
Results 1 to 6 of 6

Thread: [RESOLVED] Hide and show multiple content with css?

  1. #1

    Thread Starter
    Frenzied Member
    Join Date
    Oct 2000
    Posts
    1,463

    Resolved [RESOLVED] Hide and show multiple content with css?

    Hello,

    Here is an example I found online that does hide/show content using just css which is what I want so I do not rely on javascript. Is there a way to change this so I can have multiple DIVs to hide and show? Or is this css hard coded to work with only one div?


    Code:
    <!DOCTYPE html>
    <head>
       <title>menu mockup</title>
       <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>Here's a list</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>
       <p>How about that?</p>
    </body>
    </html>

  2. #2
    PowerPoster kfcSmitty's Avatar
    Join Date
    May 2005
    Posts
    2,174

    Re: Hide and show multiple content with css?

    The code you posted will hide as many divs as you want. All you need to do is add a class of "hide" to the ones you want hidden and "show" to the ones you want to have the styles of the "show" class.

  3. #3
    WiggleWiggle dclamp's Avatar
    Join Date
    Aug 2006
    Posts
    3,529

    Re: Hide and show multiple content with css?

    If you are wanting to click a link to show/hide a div then you will have to use javascript. You could technically use a server-side language to do this, but javascript is easier, and looks nicer.

  4. #4

    Thread Starter
    Frenzied Member
    Join Date
    Oct 2000
    Posts
    1,463

    Re: Hide and show multiple content with css?

    Thanks kfcSmitty but unfortunately I do not know how to do that. Any way you can help me out? I want to use the one routine for any dics by passing an ide of the div to change if possible. I have seen this in javascript but when I try it on different browsers it prompts me to run it or not and I hate to rely on it. Where this css seems to work well.

    Thanks

  5. #5

    Thread Starter
    Frenzied Member
    Join Date
    Oct 2000
    Posts
    1,463

    Re: Hide and show multiple content with css?

    Nevermind, I got it!

    Thanks

  6. #6

    Thread Starter
    Frenzied Member
    Join Date
    Oct 2000
    Posts
    1,463

    Question Re: [RESOLVED] Hide and show multiple content with css?

    Actually it is not fixed. Below is the code I updated. If one is showing and one is hidden and I click one of them, the other changes also. Is there any way to use the css for one at a time? I don't want to create a custom css for each dive. This is for replying to a comment on a web page and there can be over 100 at a time.

    Thanks

    Code:

    Code:
    <!DOCTYPE html>
    <head>
       <title>menu mockup</title>
       <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>Here's a list</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>
       <p>How about that?</p>
    
    
    
       <p>Here's a list</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>

Posting Permissions

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



Featured


Click Here to Expand Forum to Full Width