To hide input tag, we have several methods in CSS. So, the actual HTML input radio element must be invisible from the users. The label tag we placed under h2 (that has class handle) for visible area of collapsible text. The input with type “radio” or “checkbox” will be used to get checked and unchecked value through the label tag. If you are thinking why I said that, then here is my answer: In CSS coding, first of all we’ll hide the input element. Now, it’s time to style and functionalities the accordion using CSS. Now, its your choice which type of output you want to get. Checkbox input: Toggle (show / hide) accordion contents but not close others.Radio input: Close other opened accordion when select a new one but not toggle same accordion.Here the main output (in regards to accordion) difference between radio and checkbox type. Its depends on you what you want to produce. However, the output is quite different (can be see on demo page). You are not limited to use input type radio only. Increase ID number for both input and label.
Using auto text expander update#
You just need to update input and label IDs. Similarly, you can add multiple collapsible elements just like the above structure. The label tag will be used for visible short heading of the accordion while the div tag (that placed after the label tag with class name “content”) will be used for detailed information. The basic expand and collapse structure is as follows: Īs you can see above code, you need to place an input tag (with type checkbox or radio) just before the label tag.
![using auto text expander using auto text expander](https://www.jitbit.com/images/screenshots/autotext.png)
In HTML structure, we’ll define a section tag with class name “accordion” and all other elements wrap into it. Because this accordion also will have same user experience like other JavaScript accordions. So, the users can’t judge whats behind it. One thing I want to mention here that finished output of accordion will works like other JS based accordions. Initially, we’ll build an HTML structure for our accordion to expand collapse text but without using JavaScript. Here, we’ll create an expandable and collapsible accordion using HTML & CSS. If you are looking for a lightweight pure CSS accordion, then this tutorial might be helpful for you. But for lite version web projects, we really need something that can be done without using JavaScript. No doubt, a number of accordions (for JavaScript libraries like jQuery, React Vue.js etc.) are already available in the market. For heavy contents websites we need a multi-functional accordion plugin that comes with multiple configuration options.
![using auto text expander using auto text expander](https://i.ytimg.com/vi/un-prZi6Cwo/mqdefault.jpg)
Generally, an accordion is used to make expandable HTML contents on a Web page.
Using auto text expander code#
So, I decided to code a simple and straightforward HTML & CSS based accordion to expand and collapse text without using JavaScript. I searched on the web, but didn’t find what I needed. A few days back, I needed an accordion to toggle plain text using only CSS.