Hi there, I came across an accordion on a website: designed by the talented Paul Underwood. I really like this accordion because of its sleek design achieved with simple CSS. However, I have encountered an issue where I want to include multiple accordions on the same page. This creates a problem as they all share the same class, impacting their functionality. Is there a way to give each accordion its own unique class without having to manually copy, paste, and rename everything? My ultimate goal is to have several accordions working together on a single page.
Below is the code from the original website:
Html:
<div class="accordion vertical">
<section>
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet,</p>
</section>
<section>
<h2>Services</h2>
<p>Lorem ipsum dolor sit amet,</p>
</section>
<section>
<h2>Blog</h2>
<p>Lorem ipsum dolor sit amet</p>
</section>
<section>
<h2>Portfolio</h2>
<p>Lorem ipsum dolor sit amet,</p>
</section>
<section>
<h2>Contact</h2>
<p>Lorem ipsum dolor sit amet</p>
</section>
</div>
CSS:
/**
* CSS3 Only Horizontal and Vertical Accordion
* Author: Paul Underwood for Hongkiat.com
* Website: www.paulund.co.uk
* Date: 27/11/11
* Version: 1.0
*/
//CSS code not altered