Details closed

Questions or comments?

Purpose

Keep selected details elements closed on defined viewport and down. If no viewport is defined, the default is small viewport.

Working example

Evaluation and report

There is no evaluation and report available for this component.

How to implement

  1. Add the CSS class wb-details-close to any <details> element you want closed on a defined breakpoint and smaller breakpoints.
  2. Optionally, add the attribute data-breakpoint with any of the following value and the <details> element will remain closed on that breakpoint and smaller breakpoints (default is "sm"):
    • xxs
    • xs
    • sm
    • md
    • lg

Configuration

Property name Type Description Values
[data-breakpoint] String Defines highest viewport from which the <details> element is closed. xxs, xs, sm, md, lg

Function

Function type Name How to implement What it does
jQuery Event wb-init.wb-details-close Triggered manually (e.g., $( ".wb-details-close" ).trigger( "wb-init.wb-details-close" );). Initializes the details-close plugin. This plugin will be initialized automatically unless the .wb-details-close element is added after the page load and wet-boew was initialized.
jQuery Event wb-ready.wb-details-close Triggered automatically after the plugin initializes. Used to identify when and where the plugin initializes (target of the event). 
$( document ).on( "wb-ready.wb-details-close", ".wb-details-close", function( event ) {
});
$elm.on( "wb-ready.wb-details-close", function( event ) {
});

Source code

Details closed on mobile source code on GitHub

Date modified: