How to use the W3.css Accordian
The page you are viewing uses the W3.css Accordian "contruct" extensively. In addition I also developed my own Accordian not using the W3.css Framework. There is an example of the Accordian that I use in the template used for my current pages. This DOES use the W3.css accordian.
On this page you will see the W3.css Accordian in action in the Overlay menu on the left of the screen. If you are viewing this page on a computer (large) screen then you will see a top bar menu with dropdowns that are also based on the W3.css Framework. The code for these menus is discussed in more detail on the Overlay Menu page and subsequent pages
The simple examples:
The first two examples are 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
Accordions
An accordion is used to show (and hide) HTML content:
Section 1
Some text..
Animated example
Animated Accordions
The documentation for the W3C.css Framework says:
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
In this example, I 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.
I still have an interaction between the control function for the accordian.
I had to to rename the functions for the accordian for the demo on the page.
The heights of the divs need to be looked at. (Actually the thing is that the drop/acc menu would not be used this way)
Background to this page
Seeing a visit to this page that seemed to be also interested in the Friends template and the use of the accordian and dropdown menu system, I decided to add some notes on this page and the first example of how I used it.
I decided not to reformat the original experiment page as it shows a hybrid design between this page and the Friends template. However, this page has the new template format and the demonstration is embedded on this page.