The post is a tutorial which will teach you how to create a content accordion by just using CSS3. In the tutorial you have the option of both horizontal and vertical content accordion, the accordion will use CSS transitions to slide the contents of accordion. You can move between the different slides by clicking on the headline of the slide. CSS3 can react to different events from the user such as mouse hover events and mouse active event, but it doesn't have a mouse click event so we use the :target class so we know which slide the user clicked on. We can then set a different style on :target event. Along with the tutorial there is a demo page to see the accordion in action. You can also download the HTML and the CSS for the fully working accordion. ## The Final Result
The final result of the tutorial is a horizontal and vertical accordion. ### Horizontal Accordion
### Vertical Accordion
Go to Hongkiat to learn how you can create a Pure CSS3 Content Accordion.
Get weekly updates to your email