Accordion: open all


#1

@elixirgraphics One of the very nice features of Ivy 2 is the ability to have an “open all” button/option added to the bottom of a set of accordions. I’m wondering if the same might be possible at some point in the future for the Foundry accordion stacks.

There are always some folks who prefer to see everything all at once (for a variety of reasons): so adding this option would be quite useful in some cases. Currently I’m using Ivy2 with a new course website I’m developing, but I think I’d like to go “all Foundry” in the future.


#2

Hey @mitchellm!

I think this is a feature that was asked about before. That functionality isn’t a part of the Bootstrap accordion (a.k.a. Collapse). If you need a feature like that I would definitely say stick with Ivy 2 for your accordion in situations like that.


#3

In Rapidweaver, if you open the inspector while viewing the page with the accordion, then under the HTML Code tab add this javascript:

$(function () {

var active = true;

$('#collapse-init').click(function () {
    if (active) {
        active = false;
        $('.panel-collapse').collapse('show');
        $('.panel-title').attr('data-toggle', '');
        $(this).text('Enable accordion behavior');
    } else {
        active = true;
        $('.panel-collapse').collapse('hide');
        $('.panel-title').attr('data-toggle', 'collapse');
        $(this).text('Disable accordion behavior');
    }
});

$('#accordion').on('show.bs.collapse', function () {
    if (active) $('#accordion .in').collapse('hide');
});

});

Within the css tab add this:
.panel-title:hover {
cursor: pointer;
}

Then add a paragraph stack above or below your accordion and replace the default text with this:

<a href="#" class="btn btn-default openall">open all</a> <a href="#" class="btn btn-default closeall">close all</a>

You can get the same functionality as Ivy while using the Foundry Accordian. Though Ivy is prettier! You can see a working example, then copy and paste the code from here:
http://jsfiddle.net/KyleMit/f8ypa/

Though this does work I’d stick with Ivy.


#4

@dks0035

Many thanks. I’m currently using Ivy and love it. But it’s always nice to know how to extend what I can do with the builtin Foundry accordion.

I’ve tried your suggestion but am not getting it to work. I’ve put the complete code into the Javascript pane, and the code you suggested into the CSS pane. But it does not work. I’m wondering if this bit of code on the page:

<a href="#" class="btn btn-default openall">open all</a>

is what is causing the problem. the “#” portion seems to simply link to the top of the page. Unfortunately I can’t figure out what to replace it with.

Another possibility is I inserted the incorrect code for Javascript tab as your code was a little funkily formatted in this discussion area. I inserted:

$(function () {

var active = true;

$('#collapse-init').click(function () {
    if (active) {
        active = false;
        $('.panel-collapse').collapse('show');
        $('.panel-title').attr('data-toggle', '');
        $(this).text('Enable accordion behavior');
    } else {
        active = true;
        $('.panel-collapse').collapse('hide');
        $('.panel-title').attr('data-toggle', 'collapse');
        $(this).text('Disable accordion behavior');
    }
});

$('#accordion').on('show.bs.collapse', function () {
    if (active) $('#accordion .in').collapse('hide');
});
});

#5

My mistake! Wrong code for the button.

<button id="collapse-init" class="btn btn-primary">
    Disable accordion behavior
</button>
<br/><br/>

I was at the end of my day and had way too many tabs open!
Here is a working Rapidweaver project.

accordion.rw.zip (109.9 KB)


#6

Dan: Many thanks! That works perfectly. Much appreciated.


#7

Dan: BTW although I didn’t need it, thanks very much for the example accordion project file!

I develop course websites and for about 80 to 85% of students is just fine to do regular accordions for organizing content in a learning module (audio, video, readings, etc.). But about 15-20% always want to see the “big picture” of what is included in the learning materials before they get to work. This facilitates that process.

Those people who want to see the big picture first then use accordions in the regular way: but their initial usage is one where they want to see everything up front.