MediaWiki/Foundation/Accordion

Foundation CSS Framework for MediaWiki: Accordion

An Accordion is like vertical tabs - it can be used to expand or collapse content which is structured in sections.

Each Section could be transcluded - the code would then be more concise and less problematic.

Note: To use components from the Zurb Foundation CSS Framework in MediaWiki, first install a custom skin such as the Foreground Skin or the Pivot Skin, which are built upon the Foundation CSS Framework.

The following section is an example of an Accordion

• Foundation CSS on MediaWiki

  Foundation CSS Framework by Zurb is a responsive, mobile-first CSS framework used by web developers to create sites and apps that work on any device.

  MediaWiki, however, was developed initially as a platform for Wikipedia and used wikitext so that contributors would not need to know or use html or css.

  By using a responsive skin, such as Foreground, it is now possible to develop a website or Intranet with MediaWiki that has more contemporary styling and is also responsive, to suit mobile devices through to smart TVs.

• Save yourself a headache - use Comments

  The code snippets in other examples have not been commented, to increase readability and whitespace. But that is not how I work!. To avoid problems with nested DIVs I usually add 'start' and 'end' comments so that pairs of DIVs can be identified. This is good for reliability and makes troubleshooting easier.

• Keep it simple - use less Rows

  When I started using Foundation I used a new Row for each paragraph. Now I limit Rows to each major section or changes of format requiring different columns.

Sample Code for an Accordion

Note: this code sample includes comments.

---

Open source wiki