CSS Only Toggle Divs | Pure CSS Toggle Show Hide | Smooth Slide Toggle Using Only CSS

Let's create a pure CSS toggle show hide without JavaScript or any external library. This toggle will also have CSS only smooth transition effects. You don't need to use jQuery of any JavaScript to toggle divs. We will use advanced CSS selectors that have full browser support to create toggle controls.

We have got section. Inside section we have input, label, and div. This div will be toggled when we click at label. We are using input checkbox for this 'css toggle' because multiple checkboxes can be checked or unchecked in case of check boxes. This is toggle, so we need checkbox here. If we wanted to create accordion, we will need radio buttons instead of checkboxes here. Also see the input and label relation. Inputs or checkboxes can have separate names. Checkbox is outside of label but it is connected to label by using for attribute for label. Input's unique ID is being used in for attribute of label as value. So even if input is outside of label, when I will click at label, input will be checked or unchecked. We will hide original checkboxes and use label click to check or uncheck checkbox.

We created more sections that will be toggled like this. Notice the pattern of label, input and div, and then input IDs and for attribute value for labels. Then we styled this HTML. We will hide original input. Input is connected with the label. Label click will toggle input. We will use plus CSS selector to target div next to label and input. We changed height and opacity for div. For checked input, div next to it will be toggled. We have also added nice transition to this toggle.

- Pure CSS Only Accordion
- Toggle and Accordions Playlist

Thank You!
👍 LIKE VIDEO
👊 SUBSCRIBE
🔔 PRESS BELL ICON
✍️ COMMENT

#css #tutorials #toggle #cssonly #csstutorial #webdevelopment #webstylepress #purecss

[photoinshot]

Very helpful tutorial, being a beginner could not get the nested selectors to work, but coding it the long way worked great. Thanks!

[RozzClips]

It's been 2 years from now, but this seems to be still more advance. Thank you so much

[boberto]

Learned something new today. Thanks so much.

[audiocologne]

Great explanation - Thank you very much 👍

[dyfrigshandy]

How to make it so u can toggle only show 1 section, n hide the other 2, n purposefully make it unable to view 2 or 3 at the same time?

[remifassol]

Can you post a link to the code please?

[saurabh]

// position: "sticky", // position: "sticky", // position: "sticky", // position: "sticky",

// position: "sticky", // position: "sticky",
// position: "sticky",
// position: "sticky",
// position: "sticky",