Home > CSS3 & CSS > Flexbox Based Vertical Accordion With Pure CSS
Flexbox Based Vertical Accordion With Pure CSS

Flexbox Based Vertical Accordion With Pure CSS

A smooth, responsive, vertical accordion UI that expands the current accordion panel on mouse hover, built using pure CSS and flexbox model.
How to use it:

Create the accordion panels as follow:

01

02

Section 1

03

04

Section 1

05

06

07

08

09

Section 2

10

11

Section 2

12

13

14

15

16

Section 3

17

18

Section 3

19

20

21

22

The main layout CSS:

view source
01
html, body, div + div {
02
width: 100vw;
03
height: 100vh;
04
}
05

06
div + div {
07
list-style: none;
08
position: relative;
09
display: flex;
10
flex-direction: row;
11
flex-wrap: nowrap;
12
align-items: stretch;
13
overflow: hidden;
14
}
15

16
article div {
17
text-align: left;
18
width: 58vw;
19
}

  Website Demo

About admin

Leave a Reply

Your email address will not be published. Required fields are marked *