Accordions are great for displaying a large amount of content in a compact manner, as well as establishing an engaging experience by allowing users to interact with your content. In this example, we're going to create an accordion area that displays information about a hypothetical development firm. We'll have accordion sections for work, services, clients, and contact.
First things first: solid HTML. We have to make sure that our accordion has good markup so that when JavaScript and CSS are disabled, users can still access content. We contain our accordion inside a div that's intuitively called
accordion. Then we haveh2/divpairs for each section. Theh2swill serve as the trigger for expanding a section later on; we give then a class oftrigger. The content of each section is insidedivswith a class ofsection.<body> <h1>Portfolio Site</h1> <div id="accordion"> <h2 class="trigger">Work</h2> <div class="section...