Collapse without javascript

Question

I know how to collapse (display / hide) a div:

$('#nav').click(function() { $('#hello').toggleClass('hidden'); });

.hidden { display: none; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="nav">NAV</div>
<div id="hello" class="hidden">Hello</div>

Is it possible to do this without Javascript / jQuery?

I've tried the main answer from this question, but it is not working, as detailed here.

there were some selector parts missing in your example. here's the fixed version: jsfiddle.net/2k9bb8hd/2 — Sirko
– Sirko, Commented Dec 19, 2016 at 10:44
The fiddle works if you actually add an element with class name collapse: jsfiddle.net/2k9bb8hd/3 — pawel
– pawel, Commented Dec 19, 2016 at 10:44

Matthew Spencer · Accepted Answer · 2021-08-12 05:31:01Z

66

Nobody has mentioned the 'details' element, which seems perfect for this job.

<details>
    <summary>Click to toggle</summary>
    <span>Oh, hello</span>
</details>

answered Aug 12, 2021 at 5:31

Matthew Spencer

1,0212 gold badges10 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

S.M. Pat Over a year ago

amazing, no css, no js solution

roberrrt-s · Accepted Answer · 2016-12-19 10:51:23Z

31

You may use :checked selector.

#hidden {
  display: none;
  height: 100px;
  background: red;
}
:checked + #hidden {
  display: block;
}

<input type="checkbox" id="my_checkbox" style="display:none;">
<div id="hidden"></div>

<label for="my_checkbox">Show/hide</label>

Example fiddle

edited Dec 19, 2016 at 10:51

roberrrt-s

8,2502 gold badges49 silver badges61 bronze badges

answered Dec 19, 2016 at 10:47

Denis Sheremet

2,6032 gold badges22 silver badges38 bronze badges

6 Comments

caesay Over a year ago

This is really clever

pawel Over a year ago

This is basically the idea from the answer linked in OP's question

Basj Over a year ago

@DenisSheremet Thanks! PS: by the way do you know a nice CSS hamburger icon? I browsed many SO questions but didn't find a really good looking one...

Basj Over a year ago

Thanks a lot @DenisSheremet ! Here is my variation: jsfiddle.net/sgbs7ju9/4

Denis Sheremet Over a year ago

@Kos just swap div and label and leave checkbox where it is. You'll also need to update css selector to :checked ~ #hidden or :checked + * + #hidden.

|

roberrrt-s · Accepted Answer · 2016-12-19 10:47:42Z

-2

Well yes, it is, but it's not neat. It involves the :target selector, where you can apply styles to active elements / id's. If we wrap your nav content in a link, we can apply a hashtag which invokes the active rule in our CSS.

Downside, this jumps the page to the location unless prevented by... JavaScript.

a {
  color: #000;
  text-decoration: none;
}
  
#hidden {
  display: none;
}

#hidden:target {
  display: block;
}

<div id="nav"><a href="#hidden">NAV</a></div>
<div id="hidden">Hello</div>

edited Dec 19, 2016 at 10:47

answered Dec 19, 2016 at 10:42

roberrrt-s

8,2502 gold badges49 silver badges61 bronze badges

1 Comment

roberrrt-s Over a year ago

Oh, woops! I ment :target.

Collectives™ on Stack Overflow

Collapse without javascript

3 Answers 3

1 Comment

6 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related