Dropdown

A jQuery plugin that toggles the visibility of content. Uses CSS transitions to perform the animation. Useful for building accordion like widgets or hamburger menus.

Comes with a markup API that allows running the plugin without writing a single line of JavaScript. This is Responsive's first class API and should be your first consideration when using a plugin.

Examples

Below

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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Above

Horizontal

This example toggles the horizontal visibility of an element. Adding the attribute data-dropdown-dimension="width" to your trigger and the class .width to your target enables this behaviour.

Note: To prevent word wrap fix the height and width of the item within your target container.

Accordion

Here's an example of the dropdown being used in an accordion. The CSS for the accordion is built into the framework. As with this and other elements that you wish to hide using the plugin, add the class .collapse to the target. If you want the toggle event to be animated when using the plugin in width mode, add the class .width to the target.

Un-Grouped Accordion

Accordion group item 1

Accordion group item 2

Accordion group item 3

Grouped Accordion

Add data-dropdown-parent="selector" to the trigger and class .dropdown-group to each target.

Accordion group item 1

Accordion group item 2

Accordion group item 3

Markup

Standard

<button data-dropdown-target="#collapse3" data-dropdown-dimension="width">
    Click me to toggle
</button>
<div id="collapse3" class="collapse width">
    <div class="dropdown-width-example">
        <p>
            Lorem ipsum dolor sit amet...                               
        </p>
    </div>
</div>

Accordion

<div class="accordion">
    <div class="accordion-head">
        <a data-dropdown-target="#cllps1" href="#">
            Accordion Header Trigger                               
        </a>
    </div>
    <div class="accordion-body" id="cllps1">
        <p>
            Lorem ipsum dolor sit amet...                              
        </p>
    </div>
    <div class="accordion-head">
        <a data-dropdown-target="#cllps2" href="#">
            Accordion Header Trigger                               
        </a>
    </div>
    <div class="accordion-body collapse" id="cllps2">
        <p>
            Lorem ipsum dolor sit amet...                              
        </p>
    </div>
</div>

Methods

The dropdown exposes the following method signatures.

.dropdown(options)

Initialises the plugin with an optional options object

Name	Type	Description	Default Value
target	string	A jQuery selector indicating what target to toggle the visibility of.
parent	string	A jQuery selector indicating what parent of the dropdown trigger should force grouped mode.

.dropdown("show")

Shows a collapsed dropdown target.

.dropdown("hide")

Hides a collapsed dropdown target.

.dropdown("toggle")

Toggles the visibility of a collapsed dropdown target.

Events

The dropdown exposes the following events allowing the developer to tap into its behaviour.

show.r.dropdown: This event is fired immediately when the plugins show instance method is invoked.
shown.r.dropdown: This event is fired when the plugins shown instance method is invoked once the collapsed region of the given instance has been made visible to the user.
hide.r.dropdown: This event is fired immediately when the plugins hide instance method is invoked.
hidden.r.dropdown: This event is fired once when the plugins hidden instance method is invoked and the collapsed region of the given instance has been hidden from the user.

Data API

The dropdown's default behaviour is bound using a markup API that allows running the plugin without writing a single line of JavaScript. If you need to override this behaviour the following code will allow you to do so.

// Override the default behaviour
$(document.body).off("click.r.dropdown")
                .on("click.r.dropdown", ":attrStart(data-dropdown)", function (event) {
                    // Your custom behaviour...
                }); 
// Bind to the show event.
$("YOUR_TARGET_SELECTOR").on("show.r.dropdown", function(event) {
    // Your custom behaviour...
});
                                               
// Bind to the shown event.
$("YOUR_TARGET_SELECTOR").on("shown.r.dropdown", function(event) {
    // Your custom behaviour...
});
// Bind to the hide event.
$("YOUR_TARGET_SELECTOR").on("hide.r.dropdown", function(event) {
    // Your custom behaviour...
});
// Bind to the hidden event.
$("YOUR_TARGET_SELECTOR").on("hidden.r.dropdown", function(event) {
    // Your custom behaviour...
});