In this tutorial you will learn how to make an Accordion with HTML CSS only.
View a demo online (and the source code) here: https://codepen.io/codebubb/pen/Wavjzd I quite like some of the jQuery UI components but with the future of jQuery becoming a bit more uncertain I thought I would experiment with recreating the jQuery accordion with HTML CSS only. In the tutorial you’ll learn how to create the HTML markup for the accordion, set up the basic CSS styling to make it look pretty much the same as the jQuery accordion. You’ll then learn a neat trick to make the accordion panels open up by just clicking on the heading of each panel. We’ll also add some effects which will make it almost exactly the same as the jQuery version including sliding panels, hover effects and also icons for the open and closed states. As a final bonus you’ll discover that although it requires a little more effort to create, this accordion with HTML CSS only is actually MORE flexible than the jQuery alternative. You can tweak the timings of the sliding and hover effects easily and with one simple change you can alter the whole way the accordion functions. This is on top of being able to easily style each of the components to your liking. Not only is this accordion with HTML CSS only more flexible but it is also more performant (it doesn’t spend any time scripting) and you don’t have to the load time of pulling in jQuery and also jQuery UI. So why not have a go at creating this JavaScript-less accordion? Follow the tutorial to find out how it works.