• ADS

 • CSS

 • EXCEL

 • IMAGE-SERVER

 • SCRIPTS

 • SEO

 • WEB-PAGE-LANGUAGES

 • WEB-SERVER

 • WEBSITE-MONITORING-AND-BACKUP

W3.CSS Accordions

Accordion

An accordion is used to show (and hide) HTML content. Use the w3-hide class to hide the accordion content. You can use any HTML element to open the accordion content. But we prefer a button with a w3-block class, to span the entire width of the page. Remember that buttons in W3.CSS are centered by default. Use the w3-left-align class if you want them left-aligned. View example (75) | View example (74)

Accordion vs. Dropdown (difference)

Accordion

• Content pushes the page content down.
• Content is often 100% wide.
• Often used to open multiple sections.

Dropdown

• Content lays over existing the page content.
• Content is 160px wide (default).
• Often used to open one section.