jQuery experiments: Nested Accordion - demo 2
The animatons on this page are activated when the mouse hovers over the links, or when they gain focus (the link can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the link). These accordions need an additional plug-in that binds a "hover" handler with a small delay and prevents the accidental activation of animations (see the head section in the page source code).
In Accordion 2, "Item 1" and its sub-items are links (in this example they are "same-page" links) and also have sub-menus. The sub-menus are expanded whenever a "hover" event occurs. The links are followed when a "click" event occurs. The sub-list with the anchor whose target matches the current location and the sub-list under it (if any) are initially expanded. To see it in action, click one of the links and then reload the page.
Main content
Accordion 1 - Headings + DIVs
Activated whenever a 'hover' event occurs. The first section is expanded when the page loads. One section is open at any time.
Heading 1
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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Heading 2
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.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Heading 3
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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.