Shodan.UI.Accordion

What is it?

A list, traditionally vertical, where child items can be hidden or shown using an expanding and collapsing mechanism.

Demo

Basic example with default options

  • Item 1

    • Item 1 child 1
    • Item 1 child 2
    • Item 1 child 3
    • Item 1 child 4
    • Item 1 child 5
    • Item 1 child 6
    • Item 1 child 7

  • Item 2

    • Item 2 child 1
    • Item 2 child 2
    • Item 2 child 3
    • Item 2 child 4

  • Item 3

    • Item 3 child 1
    • Item 3 child 2
    • Item 3 child 3
    • Item 3 child 4
    • Item 3 child 5
    • Item 3 child 6
    • Item 3 child 7
    • Item 3 child 8

  • Item 4

    • Item 4 child 1
    • Item 4 child 2
    • Item 4 child 3
    • Item 4 child 4

  • Item 5

    • Item 5 child 1
    • Item 5 child 2
    • Item 5 child 3
    • Item 5 child 4
    • Item 5 child 5
    • Item 5 child 6
    • Item 5 child 7

  • Item 6

    • Item 6 child 1
    • Item 6 child 2
    • Item 6 child 3

HTML

The .inner & .hd divs are only for styling purposes and can be omitted. (see note in CSS section below).

Javascript

CSS

Style as you see fit but make sure that you don't apply any border, padding or margin to the container <li>s. If you need to, add it to an .inner <div>, as per the example.

If you don't intend to use any border, margin or padding style you can omit the .inner <div> altogether.

Usage

See the demo for an example markup pattern.

new Shodan.UI.Accordion(element (String)[, options (Object)]);
  • element (DOM Element | String): A DOM element or ID
  • options (Object): Various configuration options

Options

  • allowMultiOpen (Bool): Set to true if more than one item can be open at once. Default: true.
  • autoHide (Bool): set to true if content should be hidden initially. Default: true;
  • callback (Function): Callback function to be executed after show / hide animation. Default: null.
  • contentSelector (String): CSS selector for the content to be toggled. Should be unique. Default: ".sub".
  • duration (Int): Animation duration in seconds. Default: 0.5
  • openClass (String): CSS class to be applied to container when content is showing. Default: "open".
  • toggleSelector (String): CSS selector for the toggle. Default: ".hd".
  • transition (String): Scripty2 animation transition preset. Scripty2 transitions
  • initialOpenItem (String|bool): Determines if the accordion starts with an item open. Use 'first' to have the first item open or a CSS selector to select the initially open item. Set to false for all items to start closed. Default: false.

ToDo

  • Examples demonstrating additional options.