Simple Accordion Design using only HTML and CSS

Those of you who are learning new web design should know accordion and how it works by now. An accordion is a vertically stacked list of titles, and when we click on the Heading or title, it reveals or hides the text content or other elements associated with it. All Modern website has got at least one accordion, and they mostly use it for FAQ section, Specification section, etc.

In this program, we will design a simple-looking accordion with HTML and CSS. I have not used any jquery or javascript for the functionality of the accordion. The accordion title is some dummy text like Accordion one, two, and three. Then in the collapsible items, I also used some dummy text of lorem ipsum. You can put other types of content here like an image, ordered list, unordered list, etc. in there. But for the sake of this tutorial, I used plain text. So whenever we click on the Heading or title, the dummy text or the content associated with it will reveal and hide.



In the HTML markup, I have taken a div element with a ''container' class, which will contain the accordion elements. After that, I have taken three div elements with the class name of accordion. I then have taken a label named accoedion1. I provided an h2 tag with the text ''the first accordion". Then I have taken an input element of the checkbox with an id of the same name used for the label underneath the input element. I have to take a paragraph tag with a class name of a single-text. I provided some random text inside the p tag. for the other two accordion class div, I have changed the label name, text inside a p tag, and the id name.
You may also like:

• Responsive Team Section Design Using Bootstrap
• Simple Preloader Using HTML and CSS
• Animated Typewriter Text Effect Using Jquery

In the CSS part,  we need to discard the document's default padding and the margin. Therefore we set the padding and margin to 0. we then set pleasant gradient background color for the body tag. Then I have provided a 100vh height to the body. We will give the container id a width and height of 700px and auto, respectively.  Then we set the margin to 0 auto so that the container comes in the middle of the document. After that, we will give the label a style by providing it a background color, padding, alignment, margin, and other necessary styles. We set the label to display block so that it occupies the whole width of the container. We then style the text inside the label tag. After will make some styling for the text content inside the single-text class, at the initial stage, the visibility will be hidden, and the opacity will be 0, and the display will be none. But when the label is clicked or checked, the display will be blocked, visibility will be visible, and opacity will be one. For each label, we have to set the display to none and position to a relative as well.

For the implementation of this snippet, we need to create two separate files of HTML and CSS, and after the creation of these files, you have to link the CSS file to your HTML file. Then copy the code below and paste the codes in the respective file and run index.html file in the browser.

HTML:

<h1> Simple Accordion with HTML5 and CSS3</h1> <div id="container"> <!-- Item 1 --> <div class="accordion"> <label for="acoordion1"><h2> First Accordion</h2> </label> <input type="checkbox" id="acoordion1"/> <p class="single-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio reprehenderit, hic aspernatur. Voluptates, maiores. Sequi, suscipit reiciendis saepe unde architecto qui maiores, deserunt ducimus perferendis hic. Eveniet nemo fugiat consequuntur, autem laboriosam repudiandae asperiores enim nihil ullam odit dolore similique cumque, cum quae itaque iste ipsa? Quidem, ut voluptatibus quasi.</p> </div> <!-- Item 2 --> <div class="accordion"> <label for="acoordion2"><h2> Second Accordion</h2> </label> <input type="checkbox" id="acoordion2"/> <p class="single-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio reprehenderit, hic aspernatur. Voluptates, maiores. Sequi, suscipit reiciendis saepe unde architecto qui maiores, deserunt ducimus perferendis hic. Eveniet nemo fugiat consequuntur, autem laboriosam repudiandae asperiores enim nihil ullam odit dolore similique cumque, cum quae itaque iste ipsa? Quidem, ut voluptatibus quasi.</p> </div> <!-- Item 3 --> <div class="accordion"> <label for="acoordion3"><h2> Third Accordion</h2> </label> <input type="checkbox" id="acoordion3"/> <p class="single-text"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio reprehenderit, hic aspernatur. Voluptates, maiores. Sequi, suscipit reiciendis saepe unde architecto qui maiores, deserunt ducimus perferendis hic. Eveniet nemo fugiat consequuntur, autem laboriosam repudiandae asperiores enim nihil ullam odit dolore similique cumque, cum quae itaque iste ipsa? Quidem, ut voluptatibus quasi.</p> </div> </div>


CSS:

*{ margin: 0; border: 0; } body{ background: linear-gradient(38deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%); background-size: cover; font-family: lato; height: 100vh; } h1{ margin: 0 auto; text-align: center; margin-top: 7%; margin-bottom: 2%; color: #fff; } p{ color: #000; text-align: center; margin-top: 1%; } #container { width: 700px; height: auto; margin: 0 auto; } .accordion label { display: block; background-color: #FF1493; padding: 10px; color: #fff; cursor: pointer; border-bottom: 1px solid #262626; text-align: center; margin: 0; } .accordion label h2 { margin: 0; text-transform: uppercase; } .accordion p { color: #262626; padding: 20px; line-height: 30px; visibility: hidden; opacity: 0; display: none; text-align: left; background-color: #fbfbfb; margin-top: 0; margin-bottom: 0; } #acoordion1:checked ~ .single-text{ display: block; visibility: visible; opacity: 1; } #acoordion1{ display: none; position: relative; } #acoordion2:checked ~ .single-text{ display: block; visibility: visible; opacity: 1; } #acoordion2{ display: none; position: relative; } #acoordion3:checked ~ .single-text{ display: block; visibility: visible; opacity: 1; } #acoordion3{ display: none; position: relative; }

I hope you liked the snippet. Please feel free to leave a comment down below. I will try to answer them as soon as I can. Thanks for visiting the blog.