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

Published: 01 January 1970
on channel: WebStylePress

335

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
   • Hide & Protect CSS Code
Smooth Scroll with CSS Only
   • Smooth Scroll to DIV on Different Pag...
Lazy Load with Only CSS
   • Pure CSS Lazy Load HTML Elements | La...
CSS Flex Gap / Easy Flexbox
   • Easy Flexbox Column Spacing | Flex Ga...
CSS Only Custom Radio Buttons and Checkboxes
   • CSS Only Radio Button, Checkbox & For...
Make Videos Responsive
   • How to Make YouTube Video Responsive ...
CSS Flexbox game / Learn Flexbox Easily
   • CSS Flexbox Game Play | Play Flexbox ...

More CSS Tutorials:
   • CSS

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

Channel:    / webstylepress
Website: https://www.webstylepress.com
FaceBook:   / webstylepress
Twitter:   / webstylepress
GitHub: https://github.com/webstylepress
#css #toggle #frontend #csstutorial #webdevelopment #webstylepress

On this page of the site you can watch the video online CSS Only Two Liner Toggle Show Hide | Toggle Using Only CSS | Pure CSS Toggle with a duration of hours minute second in good quality, which was uploaded by the user WebStylePress 01 January 1970, share the link with friends and acquaintances, this video has already been watched 335 times on youtube and it was liked by 3 viewers. Enjoy your viewing!

9,532

225