Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Show hide divs on click in HTML and CSS without jQuery

I want something very similar to Theming collapsible headers located here:

http://jquerymobile.com/demos/1.2.0-alpha.1/docs/content/content-collapsible.html

Without using JQuery, is this possible?

It's for a mobile site but the page is always going to be offline so I dont really want to use jquery. Also giving custom styling to jquery mobile is alot harder than using pure css and styling it yourself.

like image 337
dev6546 Avatar asked Oct 03 '13 23:10

dev6546


People also ask

How do I hide and show a div on click?

Projects In JavaScript & JQuery To show and hide div on mouse click using jQuery, use the toggle() method. On mouse click, the div is visible and on again clicking the div, it hides.

How do I completely hide a div in HTML?

To hide an element, set the style display property to “none”. document. getElementById("element").

Can you hide a div in CSS?

You can hide an element in CSS using the CSS properties display: none or visibility: hidden . display: none removes the entire element from the page and mat affect the layout of the page. visibility: hidden hides the element while keeping the space the same.

How do I completely hide an element in CSS?

Completely hiding elements can be done in 3 ways: via the CSS property display , e.g. display: none; via the CSS property visibility , e.g. visibility: hidden; via the HTML5 attribute hidden , e.g. <span hidden>


2 Answers

Using label and checkbox input

Keeps the selected item opened and togglable.

.collapse{    cursor: pointer;    display: block;    background: #cdf;  }  .collapse + input{    display: none; /* hide the checkboxes */  }  .collapse + input + div{    display:none;  }  .collapse + input:checked + div{    display:block;  }
<label class="collapse" for="_1">Collapse 1</label>  <input id="_1" type="checkbox">   <div>Content 1</div>    <label class="collapse" for="_2">Collapse 2</label>  <input id="_2" type="checkbox">  <div>Content 2</div>

Using label and named radio input

Similar to checkboxes, it just closes the already opened one.
Use name="c1" type="radio" on both inputs.

.collapse{    cursor: pointer;    display: block;    background: #cdf;  }  .collapse + input{    display: none; /* hide the checkboxes */  }  .collapse + input + div{    display:none;  }  .collapse + input:checked + div{    display:block;  }
<label class="collapse" for="_1">Collapse 1</label>  <input id="_1" type="radio" name="c1">   <div>Content 1</div>    <label class="collapse" for="_2">Collapse 2</label>  <input id="_2" type="radio" name="c1">  <div>Content 2</div>

Using tabindex and :focus

Similar to radio inputs, additionally you can trigger the states using the Tab key.
Clicking outside of the accordion will close all opened items.

.collapse > a{    background: #cdf;    cursor: pointer;    display: block;  }  .collapse:focus{    outline: none;  }  .collapse > div{    display: none;  }  .collapse:focus div{    display: block;   }
<div class="collapse" tabindex="1">    <a>Collapse 1</a>    <div>Content 1....</div>  </div>    <div class="collapse" tabindex="1">    <a>Collapse 2</a>    <div>Content 2....</div>  </div>

Using :target

Similar to using radio input, you can additionally use Tab and keys to operate

.collapse a{    display: block;    background: #cdf;  }  .collapse > div{    display:none;  }  .collapse > div:target{    display:block;   }
<div class="collapse">    <a href="#targ_1">Collapse 1</a>    <div id="targ_1">Content 1....</div>  </div>    <div class="collapse">    <a href="#targ_2">Collapse 2</a>    <div id="targ_2">Content 2....</div>  </div>

Using <detail> and <summary> tags (pure HTML)

You can use HTML5's detail and summary tags to solve this problem without any CSS styling or Javascript. Please note that these tags are not supported by Internet Explorer.

<details>    <summary>Collapse 1</summary>    <p>Content 1...</p>  </details>  <details>    <summary>Collapse 2</summary>    <p>Content 2...</p>  </details>
like image 137
Roko C. Buljan Avatar answered Sep 20 '22 05:09

Roko C. Buljan


You can use a checkbox to simulate onClick with CSS:

input[type=checkbox]:checked + p {     display: none; } 

JSFiddle

Adjacent sibling selectors

like image 39
Vucko Avatar answered Sep 19 '22 05:09

Vucko