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.
Accessibility
Keyboard support comes as standard with triggers responding to both space and enter. It can be utilised to navigate all grouped accordion elements by using the LEFT, and RIGHT keys.
Right-to-Left Language Support
Adding the attribute dir="rtl"
to the html
tag will reverse all directional input behaviour.
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
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.
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.
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.
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
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.
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.
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.
Grouped Accordion
Add data-dropdown-parent="selector"
to the trigger.
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.
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.
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.
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. null parent string A jQuery selector indicating what parent of the dropdown trigger should force grouped mode. null - .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.
Binding to these events is as follows:
// Bind to the show event.
$("YOUR_TRIGGER_SELECTOR").on("show.r.dropdown", function(event) {
// Your custom behaviour...
});
// Bind to the shown event.
$("YOUR_TRIGGER_SELECTOR").on("shown.r.dropdown", function(event) {
// Your custom behaviour...
});
// Bind to the hide event.
$("YOUR_TRIGGER_SELECTOR").on("hide.r.dropdown", function(event) {
// Your custom behaviour...
});
// Bind to the hidden event.
$("YOUR_TRIGGER_SELECTOR").on("hidden.r.dropdown", function(event) {
// Your custom behaviour...
});
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 disable this behaviour the following code will allow you to do so.
// Disable the default loading behaviour
$(document).off(".r.dropdown.data-api");