Here's a few examples:

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

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.

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

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.

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

Methods

The dropdown plugin exposes the following method signatures.

.dropdown(options)

Initialises the plugin with an optional options object

options

Contains parameters to pass to the plugin.

target

A jQuery selector indicating what target to toggle the visibility of.

parent

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 plugin exposes the following events allowing the developer to tap into its behaviour.

show.dropdown.responsive

This event is fired immediately when the plugins show instance method is invoked.

shown.dropdown.responsive

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.dropdown.responsive

This event is fired immediately when the plugins hide instance method is invoked.

hidden.dropdown.responsive

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.dropdown.responsive")
                .on("click.dropdown.responsive", ":attrStart(data-dropdown)", function (event) {
                    // Your custom behaviour...
                }); 
// Bind to the show event.
$("YOUR_TRIGGER_SELECTOR").on("show.dropdown.responsive", function(event) {
    // Your custom behaviour...
});
                                               
// Bind to the shown event.
$("YOUR_TRIGGER_SELECTOR").on("shown.dropdown.responsive", function(event) {
    // Your custom behaviour...
});
// Bind to the hide event.
$("YOUR_TRIGGER_SELECTOR").on("hide.dropdown.responsive", function(event) {
    // Your custom behaviour...
});
// Bind to the hidden event.
$("YOUR_TRIGGER_SELECTOR").on("hidden.dropdown.responsive", function(event) {
    // Your custom behaviour...
});