Panel Switcher

A jQuery plugin to emulate basic dropdown-selecting tab features across multiple element types.

Usage

Any form with can have the .panelSwitcher() method called on it. The method call and full list of settings can be seen below.

Implementation

---

There are a few starting requirements for your HTML structure:

• A 'control' form with the class .panelSwitcher__control
• A <select> element inside the control
• A panel container with a class of .panelSwitcher__panels
• Each panel (any element) should be given a class of .panelSwitcher__panel
• These panels should have data-panel attributes with unique identifiers
• Each panel should have a matching <option> within .panelSwitcher__control
• Each <option> needs a value matching the relevant panel's data-panel attribute

$.panelSwitcher()

---

Options

Coming soon...

Methods

Coming soon...

Update Log

Essential

• Write basic README.md

Project Files

The below table summarises the contents of each file throughout the structure of TouchCarousel:

/CSS
styles.css	Generic styling
/JS
panelSwitcher.js	This is the main jQuery file which runs switcher. It should be included as a script tag after your jQuery include.
panelSwitcher.min.js	A minified version for use on live sites.
HTML These are a compliled example HTML files.

Composite DOM Structures

Initial

The source-file HTML DOM structure of the carousel should be as follows:

+-- `<form>` with `<select>` -------------+
+-- .panelSwitcher__panels ---------------+
|  +----- .panelSwitcher__panel(s) ----+  |
+-----------------------------------------+