Visual Explanation: Accordion Effect

simply ben by ben huot

Screenshots of Accordion Effect

An easy way to see how to navigate my website interactivity is to explain how it works. The following pictures show how to use accordion effect for navigating my website. I am using Ben Academic Fast Track as an example. The same concepts apply to the other websites, but with different logos and color themes.

Accordion Effect with Headings and Paragraphs of Text

At the top of all my webpages for my most important books, there is an accordion effect that allows people to see many choices at once at once more easily by only showing the paragraph below the selected heading. Click on the heading and the paragraph of text appears below. Only one can be seen at a time.

There is a bug in this effect that causes the browser to scroll down past the pop up paragraph selected. You can scroll back to your selection and it will work as expected. In the latest version of Opera, the first paragraph that is opened by default first add a lot of extra space after the paragraph, but once you make a selection, it then works correctly.

screenshot of accordion effect under the advanced theme

screenshot of accordion effect under the failsafe theme

screenshot of accordion effect under the mobile theme

Accordion Effect with Headings and a List of Buttons

At the top of all my webpages for my most important books, there is an accordion effect that allows people to see many choices at once at once more easily by only showing the list of buttons below the selected heading. Click on the heading and the list of buttons appears below. Only one can be seen at a time.

There is a bug in this effect that causes the browser to scroll down past the pop up listing of buttons selected. You can scroll back to your selection and it will work as expected.

screenshot of accordion effect under the advanced theme

screenshot of accordion effect under the failsafe theme

screenshot of accordion effect under the mobile theme

footer