Analysis Links Index/Site Map About

Accordion with Symbols

The code for this page was copied from the W3C Schools website. The template for the page is the Master Responsive Menu Design

The CSS for the accordion places a minus sign after the "active" menu item. This is solved by adding button in front of .active:after

In this page the css code for the expandable sections is contained on the page itself. In other examples, the site map is an instance, the css was moved to an external css file. In addition I also created a Javascript function that expands the sections and placed it in the script.js file. However, on further analysis I feel that I was adding too many event handlers to the operation of the expandable sections. I need to review this code in more detail. The use of addEventListener was possibly not implemented correctly here.

I have also changed some of the timings on the highlighting and expansion of the sections.

Accordion with symbols

In this example a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.

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.

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.

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.

Analysis of code

The template is the "new layout" - see wp_tf.html

The css files are rh.css and fbm.css (I think that I have combined these in the css for my new layout)

The JavaScript functions have been copied to script.js but this page has the original scripts on the page.

External Sources

accordian.html