Basic Accordion using CSS Flexbox

byCodingFlicks -September 29, 2022

0

In this blog, we will share another simple yet interesting snippet about accordion design. This project is about how to create a basic accordion using CSS flexbox. Have a look at the video demo below to get an idea about the snippet. There are lots of projects related to HTML, CSS, and javascript on our Website. Below the homepage, you can click the load more button to see the snippets.

I hope you have watched the video demo. We will design a basic accordion in this project. An accordion is a type of menu that has a bunch of headings on top of one another. The associated content will either be revealed or hidden when clicked. We have used CSS Flexbox layout to make this accordion. A one-dimensional layout pattern called CSS flexbox makes it easy to design flexible and effective layouts.

You may also like:

Basic Accordion using CSS Flexbox [ Source Code ]:

You have to create two files in order to create this snippet. There are two files, one with an a.CSS extension and the other with an a.html extension. The External CSS file needs to be connected with the HTML file. If you want to use the code in your project, copy it and paste it into it. If the code doesn't work in your browser, then you should download it from the button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- codingflicks.com -->
<head>
	<title>CSS Flexbox Accordion Design</title>
	<link href="style.css" rel="stylesheet">
</head>
<body>
	 <div id="wrapper">
        <div tabindex = "1">
            <div class="content">
                <h2>Header Area</h2>            
            </div>
        </div>
        <div tabindex = "2">
            <div class="content">
                <h2>Header Area</h2>            
            </div>
        </div>
        <div tabindex = "3">
            <div class="content">
                <h2>Header Area</h2>            
            </div>
        </div>
    </div>
</body>
</html>

ADD CSS:

* {
	margin: 0;
	padding: 0;
}
body {
	display: flex;
	justify-content: center;
	height: 100vh;
	align-items: center;
	background: coral;
}
#wrapper {
	height: 300px;
	display: flex;
	flex-direction: column;
	width: 500px;
	box-shadow: 0 25px 35px 3px rgba(0, 0, 0, 0.5);
}
#wrapper>* {
	flex: 0 0 25px;
	outline: 0;
	transition: flex-basis 0.3s linear;
}
#wrapper>div:first-of-type {
	background: #b6b6b6;
	order: 3;
	cursor: pointer;
}
#wrapper>div:first-of-type:not(:focus)+div:not(:focus)+div:not(:focus) {
	flex-basis: 250px;
}
#wrapper>div:nth-of-type(2) {
	background: #dddddd;
	order: 2;
}
#wrapper>div:nth-of-type(3) {
	background: #ffffff;
	order: 1;
}
#wrapper>div[tabindex]:focus {
	flex: 1 1 250px;
}
.content h2 {
	font-family: montserrat;
	text-align: center;
	color: rgba(0, 0, 0, 0.3);
	font-weight: 500;
}

I hope that you have implemented the code correctly. There is a lot of information related to front-end development on our website. If you enjoy what you see on the website, you can share it with other people. We want to let you know how much we appreciate your visit to our website.

DOWNLOAD CODE

Please do not enter any spam link in the comment box.