Accordiondisplay Top Content On Your Website
Click on the 'Open Section' buttons below to see how accordions work:
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Need an accordion layout for your website? Many businesses choose to add a FAQs page to their website as a place to keep all the answers to the questions that they get asked again and again by their users. App landing pages and single product websites will find this CSS accordion design extremely useful. If you are working on any single product websites, take a look at our single product Shopify themes collection — as the themes are neatly integrated into the Shopify’s online shopping engine, you can easily sell your products via your website.
Accordion
An accordion is used to show (and hide) HTML content.
Use the w3-hide class to hide the accordion content.
Use any kind of button to open and close the content:
Example
Accordiondisplay Top Content On Your Website Builder
Open Section 1</button>
<div>
<p>Some text..</p>
</div>
<script>
function myFunction(id) {
var x = document.getElementById(id);
if (x.className.indexOf('w3-show') -1) {
x.className += ' w3-show';
} else {
x.className = x.className.replace(' w3-show', ');
}
}
</script>
Both the element that is used to open the accordion and the accordion's content can be any HTML element.
Accordion vs. Dropdown
This table shows the difference between an accordion and a dropdown:
| Accordion | Dropdown |
|---|---|
| Content pushes the page content down | Content lays over existing the page content |
| Content is often 100% wide | Content is 160px wide (default) |
| Often used to open multiple sections | Often used to open one section |
Accordions
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Dropdowns
Accordion Buttons
You can use any HTML element to open the accordion content. We prefer a button with a w3-block class, to span the entire width of the page (100% width).
Remember that buttons in W3.CSS are centered by default. Use the w3-left-align class if you want them left-aligned instead. However, you do not have to follow our approach - an accordion will look good either way:
Lorem ipsum...
Centered content as well!
Example
Normal button</button>
<div>
<p>Lorem ipsum...</p>
</div>
<button>
Left aligned and full-width</button>
<div>
<p>Lorem ipsum...</p>
</div>
<button>
Centered and full-width</button>
<div>
<p>Centered content as well!</p>
</div>
Active Accordion Buttons
Use JavaScript to highlight accordions that are open (clicked on):
Some other text..
Example
var x = document.getElementById(id);
if (x.className.indexOf('w3-show') -1) {
x.className += ' w3-show';
x.previousElementSibling.className += ' w3-red';
} else {
x.className = x.className.replace('w3-show', ');
x.previousElementSibling.className =
x.previousElementSibling.className.replace('w3-red', ');
}
Accordion Width
By default, the width of block is 100%. To override this, change the CSS width property of the accordion container:
Example
<button>
50%
</button>
<div>
<p>Some text..</p>
</div>
</div>
Accordion Content
Accordion with links:
Example
Accordion</button>
<div>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
Accordion as a List:
Example
Accordion</button>
<div>
<ul>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
</div>
Accordiondisplay Top Content On Your Website Domain
Accordion inside a Sidebar (You will learn more about sidebars later):
Example
<a href='#'>Link 1</a>
<a href='#'>Accordion</a>
<div>
<a href='#'>Link</a>
<a href='#'>Link</a>
</div>
<div>
<a href='#'>Dropdown</a>
<div>
<a href='#'>Link</a>
<a href='#'>Link</a>
</div>
</div>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
Accordiondisplay Top Content On Your Website Page
Animated Accordions
Accordiondisplay Top Content On Your Website Hosting
Use any of the w3-animate-classes to fade, zoom or slide in the accordion content:
Example