Is this CSS show-hide trick possible

Discussion in 'HTML & Website Design' started by ketting00, Mar 21, 2016.

  1. #1
    Hey guys,

    I'm experimenting on pure CSS show-hide event, the code below works fine so far (I picked from the internet XD):
    
    <!DOCTYPE html>
    <html><head>
        <meta charset="UTF-8">
        <title>CSS ShowHide</title>
        <style>
            .box { display: none; }
            .span:focus ~ .box { display: block; }
    
            .box {
                position: absolute;
                z-index: 100;
                border: 1px solid #111;
                padding: 5px;
                top: 0;
                right: 0;
            }
        </style>
    </head><body>
        <a href='#' class=span tabindex=0>Show Me</a>
        <div class=box >Some alarming information here</div>
    </body></html>
    
    Code (markup):
    Now, I tried to modify it to suit my need with the element that does not follow the clicking element immediately and it doesn't work.

    Here's what I've been attempting so far:
    
    <!DOCTYPE html>
    <html><head>
        <meta charset="UTF-8">
        <title>CSS ShowHide</title>
        <style>
            .box { display: none; }
            .span:focus ~ .box { display: block; }
        </style>
    </head><body>
        <ul>
            <li>List 1</li>
            <li>List 1</li>
            <li><a href='#' class=span tabindex=0>Show</a></li>
        </ul>
        <div class=box>
            <p>Content 1</p>
            <p>Content 2</p>
            <p>Content 3</p>
        </div>
    </body></html>
    
    Code (markup):
    Why this doesn't work? Do you have any idea how to make it working? I want to try pure CSS first before I add a script in.

    Thanks,
     
    Solved! View solution.
    Last edited: Mar 21, 2016
    ketting00, Mar 21, 2016 IP
  2. themes4all

    themes4all Well-Known Member

    Messages:
    662
    Likes Received:
    47
    Best Answers:
    6
    Trophy Points:
    100
    #2
    Hello there,

    You can try this :

    
    <!DOCTYPE html>
    <html><head>
        <meta charset="UTF-8">
        <title>CSS ShowHide</title>
        <style>
            div#tabs p{display:none;}
    
    div#tabs p.tab1:target {display:block;}
    div#tabs p.tab2:target {display:block;}
    div#tabs p.tab3:target {display:block;}
        </style>
    </head><body>
        <div id='tabs'>
    
      <h2 class="nav-tab-wrapper">
        <a href="#tab1" class="nav-tab tab1">test1</a>
        <a href="#tab2" class="nav-tab nav-tab-active tab2">test2</a>
        <a href="#tab3" class="nav-tab tab3">test3</a>
      </h2>
    
      <p id='tab1' class='tab1'>Awesome tab1 stuff</p>
      <p id='tab2' class='tab2'>Tab2 stuff</p>
      <p id='tab3' class='tab3'>Tab3 stuff</p>
    
    </div>
    </body></html>
    
    Code (markup):
    This do the trick ;)

    Goodluck
     
    themes4all, Mar 21, 2016 IP
    ketting00 likes this.
  3. ketting00

    ketting00 Well-Known Member

    Messages:
    782
    Likes Received:
    28
    Best Answers:
    3
    Trophy Points:
    128
    #3
    Hi @themes4all,

    Thanks for quick reply. Very close to what I needed. I'll use this when all else failed.

    Appreciated,
     
    ketting00, Mar 21, 2016 IP
    themes4all likes this.
  4. denis bayly

    denis bayly Well-Known Member

    Messages:
    110
    Likes Received:
    29
    Best Answers:
    6
    Trophy Points:
    105
    #4
    Hi there ketting00,

    try it like this...

    
    
    <!DOCTYPE html>
    <html>
    <head>
    
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
    
    <title>CSS ShowHide</title>
    
    <link rel="stylesheet" href="screen.css" media="screen">
    
    <style media="screen">
    #cb, #box { 
        display:none; 
     }
    ul label:before {
        content:'Show';
        color:#00f;
        cursor:pointer;
     }
    #cb:checked~ul label:before {
        content:'Hide';
     }
    #cb:checked~#box { 
        display:block; 
     }
    </style>
    
    </head>
    <body>
    
    <input id="cb" type="checkbox">
    
    <ul>
     <li>List 1</li>
     <li>List 1</li>
     <li><label for="cb"></label></li>
    </ul>
    
    <div id="box">
     <p>Content 1</p>
     <p>Content 2</p>
     <p>Content 3</p>
    </div>
    
    </body>
    </html>
    
    Code (markup):

    coothead
     
    denis bayly, Mar 21, 2016 IP
    ketting00 likes this.
  5. ketting00

    ketting00 Well-Known Member

    Messages:
    782
    Likes Received:
    28
    Best Answers:
    3
    Trophy Points:
    128
    #5
    Well,

    I'm extremely stupid.
    This works (just styling the .box div and it works perfectly):
    
    <!DOCTYPE html>
    <html><head>
        <meta charset="UTF-8">
        <title>CSS ShowHide</title>
        <style>
            .box { display: none; }
            .span:focus ~ .box { display: block; }
        </style>
    </head><body>
        <ul>
            <li>List 1</li>
            <li>List 1</li>
            <li>
                <a href='#' class=span tabindex=0>Show</a>
                <div class=box>
                    <p>Content 1</p>
                    <p>Content 2</p>
                    <p>Content 3</p>
                </div>
            </li>
        </ul>
    </body></html>
    
    Code (markup):
    Testing on Chrome and Firefox.
     
    ketting00, Mar 21, 2016 IP
  6. ketting00

    ketting00 Well-Known Member

    Messages:
    782
    Likes Received:
    28
    Best Answers:
    3
    Trophy Points:
    128
    #6
    Thanks @denis bayly,

    Yours works quite close, but I don't want to click the link again in order to make the modal disappeared.
     
    ketting00, Mar 21, 2016 IP
  7. #7
    What about this? This way you aren't stuck with an anchor and can style "Show/Hide" however your want.

    <html><head>
        <meta charset="UTF-8">
        <title>CSS ShowHide</title>
        <style>
    
        .onclick-menu:before {
            content: "Show/Hide";
            background:none!important;
            border:none;
            padding:0!important;
            font: inherit;
            /*border is optional*/
            border-bottom:1px solid #444;
            cursor: pointer;
        }
        .onclick-menu:focus {
            /* clicking on label should toggle the menu */
            pointer-events: none;
        }
        .onclick-menu:focus .onclick-menu-content {
            visibility: visible;
            /* don't let pointer-events affect descendant elements */
            pointer-events: auto;
        }
        .onclick-menu-content {
            position: absolute;
            z-index: 1;
            visibility: hidden;
    
        }
    
    
        </style>
    </head><body>
        <ul>
            <li>List 1</li>
            <li>List 1</li>
            <li><div tabindex="0" class="onclick-menu"><ul class="onclick-menu-content">
                  <li> Content 1</li>
                  <li> Content 2</li>
                  <li>Content 3</li>
            </ul></div>
    
            </li>
        </ul>
    
    
    </body></html>
    
    Code (markup):
     
    drestauro, Mar 21, 2016 IP
  8. ketting00

    ketting00 Well-Known Member

    Messages:
    782
    Likes Received:
    28
    Best Answers:
    3
    Trophy Points:
    128
    #8
    Hey @drestauro,

    That's perfecto!

    Thank you man.
     
    ketting00, Mar 21, 2016 IP
  9. drestauro

    drestauro Member

    Messages:
    17
    Likes Received:
    1
    Best Answers:
    1
    Trophy Points:
    35
    #9
    Sure thing. Glad I could help!
     
    drestauro, Mar 21, 2016 IP