Sun Dial Menu

How to use the W3.css Accordian

This example is taken from the W3 Schools website and is to compare my original implementation. The W3 Framework is linked and the override for the interaction of my memu has been added in the <head> of the page.

Simple example


An accordion is used to show (and hide) HTML content:

Section 1

Some text..

Animated example

Animated Accordions

Use any of the w3-animate-classes to fade, zoom or slide in the accordion content (w3-animate-zoom|opacity|top|bottom|left|right):

Dropdown and Accordian example

The sidebar (w3-sidebar) doesn't seem to display on this page. I removed it from the container.

I need to look at the W3 reference to position the text on the w3-bar-block

Link 1
Link 2 Link 3

Sidebar Accordion

In this example, we have added an accordion and a dropdown menu inside the side navigation.

Click on both to understand how they differ from each other. The accordion will push down the content, while the dropdown lays over the content.

Top Menu

Site design by Tempusfugit Web Design -