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

Question

I\'ve been searching for a good trick to make a Hide/Show content or a list with only CSS and no javascript. I\'ve managed to make this action:

Answer 1

This is what I've used recently.

CSS

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;}

HTML

<div id='tabs'>
  <h2 class="nav-tab-wrapper">
    <a href="#tab1" class="nav-tab tab1">Pages</a>
    <a href="#tab2" class="nav-tab nav-tab-active tab2">Email</a>
    <a href="#tab3" class="nav-tab tab3">Support</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>

https://jsfiddle.net/hoq0djwc/1/

Hope it helps somewhere.

Answer 2

Just wanted to illustrate, in the context of nested lists, the usefulness of the hidden checkbox <input> approach @jeffmcneill recommends — a context where each shown/hidden element should hold its state independently of focus and the show/hide state of other elements on the page.

Giving values with a common set of beginning characters to the id attributes of all the checkboxes used for the shown/hidden elements on the page lets you use an economical [id^=""] selector scheme for the stylesheet rules that toggle your clickable element’s appearance and the related shown/hidden element’s display state back and forth. Here, my ids are ‘expanded-1,’ ‘expanded-2,’ ‘expanded-3.’

Note that I’ve also used @Diepen’s :after selector idea in order to keep the <label> element free of content in the html.

Note also that the <input> <label> <div class="collapsible"> sequence matters, and the corresponding CSS with + selector instead of ~.

jsfiddle here

.collapse-below {
    display: inline;
}

p.collapse-below::after {
    content: '\000A0\000A0';
}

p.collapse-below ~ label {
    display: inline;
}

p.collapse-below ~ label:hover {
    color: #ccc;
}

input.collapse-below,
ul.collapsible {
    display: none;
}

input[id^="expanded"]:checked + label::after {
    content: '\025BE';
}

input[id^="expanded"]:not(:checked) + label::after {
    content: '\025B8';
}

input[id^="expanded"]:checked + label + ul.collapsible {
    display: block;
}

input[id^="expanded"]:not(:checked) + label + ul.collapsible {
    display: none;
}

<ul>
  <li>single item a</li>
  <li>single item b</li>
  <li>
    <p class="collapse-below" title="this expands">multiple item a</p>
    <input type="checkbox" id="expanded-1" class="collapse-below" name="toggle">
    <label for="expanded-1" title="click to expand"></label>
    <ul class="collapsible">
      <li>sub item a.1</li>
      <li>sub item a.2</li>
    </ul>
  </li>
  <li>single item c</li>
  <li>
    <p class="collapse-below" title="this expands">multiple item b</p>
    <input type="checkbox" id="expanded-2" class="collapse-below" name="toggle">
    <label for="expanded-2" title="click to expand"></label>
    <ul class="collapsible">
      <li>sub item b.1</li>
      <li>sub item b.2</li>
    </ul>
  </li>
  <li>single item d</li>
  <li>single item e</li>
  <li>
    <p class="collapse-below" title="this expands">multiple item c</p>
    <input type="checkbox" id="expanded-3" class="collapse-below" name="toggle">
    <label for="expanded-3" title="click to expand"></label>
    <ul class="collapsible">
      <li>sub item c.1</li>
      <li>sub item c.2</li>
    </ul>
  </li>
</ul>

Answer 3

This is going to blow your mind: Hidden radio buttons.

input#show, input#hide {
    display:none;
}

span#content {
    display:none;
}
input#show:checked ~ span#content {
  display:block;
}

input#hide:checked ~ span#content {
    display:none;
}

<label for="show">
    <span>[Show]</span>
</label>
<input type=radio id="show" name="group">
<label for="hide">
    <span>[Hide]</span> 
</label>    
<input type=radio id="hide" name="group">
<span id="content">Content</span>

Answer 4

First, thanks to William.

Second - i needed a dynamic version. And it works!

An example:

CSS:

p[id^="detailView-"]
{
    display: none;
}

p[id^="detailView-"]:target
{
    display: block;
}

HTML:

<a href="#detailView-1">Show View1</a>
<p id="detailView-1">View1</p>

<a href="#detailView-2">Show View2</a>
<p id="detailView-2">View2</p>

Answer 5

Nowadays (2020) you can do this with pure HTML5 and you don't need JavaScript or CSS3.

<details>
<summary>Put your summary here</summary>
<p>Put your content here!</p>
</details>

Answer 6

I used a hidden checkbox to persistent view of some message. The checkbox could be hidden (display:none) or not. This is a tiny code that I could write.

You can see and test the demo on JSFiddle

HTML:

<input type=checkbox id="show">
<label for="show">Help?</label>
<span id="content">Do you need some help?</span>

CSS:

#show,#content{display:none;}
#show:checked~#content{display:block;}

Run code snippet:

#show,#content{display:none;}
#show:checked~#content{display:block;}

<input id="show" type=checkbox>
<label for="show">Click for Help</label>
<span  id="content">Do you need some help?</span>

http://jsfiddle.net/9s8scbL7/