What Is the Simplest Way to Implement Pure CSS Show/Hide

What is the simplest way to implement pure css show/hide?

there is a plethora of options based on the structure (for modern browsers).

Have a look at the

1. selector + selector  adjacent sibling selector
2. selector ~ selector  general sibling selector
3. selector selector      descendant selector
4. selector > selector  child selector

These can be combined with classes / ids / pseudo-selectors like :hover etc, and create a big list of options.

here is a small demo i made to showcase them : http://jsfiddle.net/gaby/8v9Yz/

Single button to show/hide element with pure CSS

This could help

.details,.show,.hide:target {  display: none;}.hide:target + .show,.hide:target ~ .details {  display: block;}

<div>  <a id="hide1" href="#hide1" class="hide">+ Expand</a>  <a id="show1" href="#show1" class="show">- Expand</a>  <div class="details">    Content goes here.  </div>  </div>

Defaulting Show/Hide to Hide with pure CSS using checkbox

1. Change
   <input id="checkbox-privacymode" type="checkbox">
   to
   <input id="checkbox-privacymode" type="checkbox">

2. You will need to reposition your HTML elements so that the message is immediately after the checkbox.

3. Once the message is correctly positioned in the HTML code, in CSS you can select the message like this:

#checkbox-privacymode:checked + p {
   display: none;
}

How to show/hide div on click with stricly HTML/CSS

Html

<label for="toggle-1"> Button </label>
<input type="checkbox" id="toggle-1">
<div class="facebook"> Facebook Content</div>

CSS

/* Checkbox Hack */

input[type=checkbox] {
   position: absolute;
   top: -9999px;
   left: -9999px;
}
label { 
  -webkit-appearance: push-button;
  -moz-appearance: button; 
  display: inline-block;
  margin: 60px 0 10px 0;
  cursor: pointer;
}

/* Default State */
.facebook {
   background: green;
   width: 400px;
   height: 100px;
   line-height: 100px;
   color: white;
   text-align: center;
}

/* Toggled State */
input[type=checkbox]:checked ~ .facebook {
   display: none;
}

fiddle Here And more About this csstricks

Pure CSS hide/show with radio button: a parent/descendant problem?

When you put the input inside a label element you change the level which it resides, so the tilde(~) selector does not work. If you really need the input to be inside a label element you need to use js.

Showing and hiding something with pure CSS with show and hide button

https://jsfiddle.net/ab08s7k6/

#cont {    display: none;}#show:target #cont {    display: inline-block;}#show:target #show {    display: none;

<div id="show">    <a href="#show" id="show">Open</a>    <div id="cont">        Something in here        <a href="#hide" id="hide" >Close</a>    </div></div>

Hide Show content-list with only CSS, no javascript used

I wouldn't use checkboxes, i'd use the code you already have

DEMO http://jsfiddle.net/6W7XD/1/

CSS

body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert{display:none;}

HTML

<span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert" >Some alarming information here</p>

This way the text is only hidden on click of the hide element

---

Related Topics