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,
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
Hi @themes4all, Thanks for quick reply. Very close to what I needed. I'll use this when all else failed. Appreciated,
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
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.
Thanks @denis bayly, Yours works quite close, but I don't want to click the link again in order to make the modal disappeared.
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):