Content Accordions

[lesliekirk]

Any recommendations for an Accordion javascript that will play nicely with Storyteller? The store owner would like to use it within "content" type pages.

[Matt Zimmermann]

Hi Leslie,

Since Storyteller ships with jQuery, you should be able to use any of the plugins out there for this. Another option would be to roll your own, something like https://css-tricks.com/snippets/jque...ery-accordion/

[Bruce - PhosphorMedia]

I prefer this one:

https://jqueryui.com/accordion/

As the HTML markup is the cleanest i've seen.

[lesliekirk]

This is the one I'm using:

https://jsfiddle.net/nikdtu/3amzhp6z/

It's nice and neat too. The only issue I ran into - the jQuery included with Storyteller couldn't run it.

[Matt Zimmermann]

Hi Leslie,

You may need to make sure the site is on the latest version of jQuery and update the click event to the modern ON version.

$(document).ready(function () {
    //toggle the component with class accordion_body
    $(".accordion_head").on('click', function () {
        if ($('.accordion_body').is(':visible')) {
            $(".accordion_body").slideUp(300);
            $(".plusminus").text('+');
        }
        if ($(this).next(".accordion_body").is(':visible')) {
            $(this).next(".accordion_body").slideUp(300);
            $(this).children(".plusminus").text('+');
        }
        else {
            $(this).next(".accordion_body").slideDown(300);
            $(this).children(".plusminus").text('-');
        }
    });
});