Skip to main content

JS support to expand/collapse content, like HTML5 details/summary elements

Project description

django-html5accordion adds JS support to expand/collapse any content, like HTML5 details/summary elements. It can be called on any element, and accepts options to set the selector for the summary contents that should always remain visible (and act as the link to expand/collapse the hidden content), the speed of the slideUp/Down animation, the class to be added when the details element is expanded, selectors for elements within summary that should not trigger the expand/collapse, and callback fns.

Dependencies

Installation

In your Django project settings, add “html5accordion” to your INSTALLED_APPS.

Usage

Linking the JS:

<script src="{{ STATIC_URL }}html5accordion/jquery.html5accordion.js"></script>

Sample HTML:

<article class="details">
  <header class="summary">
    <p>This content will always be visible</p>
  </header>
  <div>
    <p>This content will expand/collapse when `.summary` is clicked</p>
  </div>
</article>

Calling the plugin:

$('.details').html5accordion();

Calling the plugin with a variety of options explicitly configured to their default values:

$('.details').html5accordion({
  summarySelector: '.summary',                // Selector for summary text
  slideSpeed: 200,                            // Slide animation speed (ms)
  expandedClass: 'open',                      // Class added when details are
                                                // expanded
  ignoredElements: 'button, a, input, label', // Elements within `summary` that
                                                // will not trigger expand/collapse
  initialSlideSpeed: null,                    // Slide animation speed (ms) for
                                                // already-expanded details
  openCallback: null,                         // Callback fn after open animation
  closeCallback: null                         // Callback fn after close animation
});

Note: To expand a details element on initial load, simply add class open (or whatever class is passed as option expandedClass), or add attribute open.

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

django-html5accordion-0.1.8.tar.gz (5.7 kB view details)

Uploaded Source

File details

Details for the file django-html5accordion-0.1.8.tar.gz.

File metadata

File hashes

Hashes for django-html5accordion-0.1.8.tar.gz
Algorithm Hash digest
SHA256 55f93d01a8da99f3748451cb6177c4c5bd06ce28b107f03f7a8f146ff81fe210
MD5 c43cbe160d769a904b379684de476b5b
BLAKE2b-256 9e5e4a92df85bb3b88f601b04bea7dec4a032891ec27fa1282c4c32278cfb8ff

See more details on using hashes here.

Provenance

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page