Social Buttons
  1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Is this CSS show-hide trick possible

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

0
  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.
    SEMrush
    Thanks,
     
    Solved! View solution.
    Last edited: Mar 21, 2016
    ketting00, Mar 21, 2016 IP
    SEMrush
  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:
    754
    Likes Received:
    27
    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 Active Member

    Messages:
    83
    Likes Received:
    24
    Best Answers:
    5
    Trophy Points:
    60
    #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:
    754
    Likes Received:
    27
    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:
    754
    Likes Received:
    27
    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:
    754
    Likes Received:
    27
    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