CSS Only Two Liner Toggle Show Hide | Toggle Using Only CSS | Pure CSS Toggle

Using only two lines of CSS code, you can create a toggle easily. We took a section in HTML. Inside section we have a heading and a div. On click on heading, we want to toggle text next to it. We took copies of same section to see toggle in action properly.

We also applied some background colors, paddings and added plus and minus signs by using CSS Pseudo elements to show opened and collapsed state for the toggled area.

First of all we have to hide the sections that have text. Then on heading focus, we will display text next to it by using plus CSS selector. Plus CSS selector selects the first target element that is placed immediately after an element.

There is one missing piece that we need to add to the code. That is tabindex. Apply tabindex for headings and then click at heading for any section. For tabindex, you can use 0 or you can use series. But you have to use it, otherwise this toggle won't work.

This toggle seems to work fine but it's not. It's based on focus state of an element and if we focus something else or 'on focus out', opened div closes. Also I can show the content area, but I can not hide it on clicking it again. Clicking a heading will show div next to it but clicking it again will not hide it.

So this is a good example of what is possible by using simple things. But for actual toggle functionality, we need little bit more then that. JavaScript is there to manipulate DOM elements. Showing, hiding and toggling classes are needed to create proper toggle or accordion functionality.

But this also does not mean that you can not achieve it by using only CSS. If you cleverly use label, hidden input fields, and CSS transitions, you can achieve very much functional toggle or accordion widget. I have given you a hint. In coming videos I am going to show you how can you easily create a proper toggle and accordion by using pure CSS. Stay tuned.

- Hide CSS Code
- Smooth Scroll with CSS Only
- Lazy Load with Only CSS
- CSS Flex Gap / Easy Flexbox
- CSS Only Custom Radio Buttons and Checkboxes
- Make Videos Responsive
- CSS Flexbox game / Learn Flexbox Easily

More CSS Tutorials:

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

#css #toggle #frontend #csstutorial #webdevelopment #webstylepress