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.
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.
To hide an element, set the style display property to “none”. document. getElementById("element").
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.
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>
label
and checkbox
inputKeeps 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>
label
and named radio
inputSimilar 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>
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>
: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>
<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>
You can use a checkbox
to simulate onClick with CSS:
input[type=checkbox]:checked + p { display: none; }
JSFiddle
Adjacent sibling selectors
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With