Starting accordions closed on a page

Hi there.

I would like all accordions on a certain page to be closed as standard when the page loads. How do I do this? By browsing the forum I read something about a "closed_all" setting, but where do I enable it?

Thanks!

/Njilski

That's MooTools javascript in your page layout section.
Select moo_close _all in the Expert Settings>Mootools templates

I think this is the solution.

I just saw in 2.8.2 we have a different set of Moo Tools options.

I 'nearly' upgraded from 2.7.5 to 2.8.2 - Irregardless of if I choose one or all the Moo Tools options in 2.8.2, my page won't load with accordions closed either.

:?:

Hi.

TYPOlight 2.8 dosen't include moo_close_all template. But you can create it.

1. Copy of template moo_accordion.[/*:m:3adbzdkw]
2. Rename it your favorite name, such as moo_accordion_close_all.[/*:m:3adbzdkw]
3. Add one line "display: false," as below.[/*:m:3adbzdkw]
4. Use this newly created template in your page layout.[/*:m:3adbzdkw]

Code:

---

window.addEvent('domready', function() {
  new Accordion($$('div.toggler'), $$('div.accordion'), {
    alwaysHide: true,
    display: false,
    opacity: false
  });
 });

---

Best regards.

Thank you so much for your reply Takahiro.

I have also upgraded for the 2.8.2 version so had the same problem as xeberdee. Now it works! :D

Thanks Taca - I would never have found that, and it did the trick it seems - allthough I got a lot of work to do I can see with lots of other stuff too - slimbox won't work and there are lots of CSS issues :x

Nobody said it was easy - I guess I'll just go back to the start.

:)

... or so I thought! When I modify and use the new template, the accordion is just "frozen" and is shown at the page. Anybody got a link to a "moo_accordion_closed_all" file that I can download or tell me what might be wrong?

Thanks
/Andreas

Is it help for you?

ftp://ftp.back-street.net/pub/typoli..._close_all.tpl

Thanks once again Taca. You just saved my day! :)

/Andreas

Thanks for this code, Taca. I tried it and experienced a small setback. When I load a page, the small images that I had placed in front of my accordion headings are not there. They will appear only after I have clicked on one of the accordion items http://dsdev.ds.umn.edu/testing-info-for-students.html.

Any thoughts on how to have the images showing?

I am using a custom MooTools accordion as described in this post to get the images working:
http://www.contao-community.org/view...php?f=7&t=1962

This is a Google-translated version of a German Contao wiki article: http://translate.google.de/translate?u= ... =&ie=UTF-8

Thanks for this reference xcfs! I tried it out by copying the template code into a new template and also used the provided css statements, but it did not work for me :-(. The accordion elements stayed open and did not close at all. I also tried just using the line

display: - 1

with my previous template code, but that too resulted in the accordion items being open and not closed at all. I have a workaround to the issue, which is to make the first page element also an accordion, but style it as if it is a regular page item. This may work just fine for now.

BTW, why "close all" template was removed?

Sorry, taca. I don't understand your question.

Oh, I'm sorry that I won't ask to you.

TYPOlight before 2.8 had moo_close_all.tpl and 2.8 deprecate it. But with these questions, it had still needs for users... So I said to myself.

Regarding close all, make sure "alwaysHide" is set to "true" in addition to "display: -1". It's possible this is overriding things, because it defaults to false, which forces at least one accordion to always be open.

Another thing I've noticed is that with the default moo_accordion template, all accordions affect each other regardless of where they are. So if you have an accordion in your main column, and a completely unrelated one in the side column, clicking one may affect the other.

As a workaround, I made the following replacement for "moo_accordion.tpl". It looks for accordions that are adjacent (with no elements in between), and groups them together. Thus you can have multliple sets of accordions that are independent of one another on the same page, without having to add any additional elements/wrappers/code/etc.

I don't know if this is completely optimized (or 100% bug free) -- with MooTools, there are so many ways to optimize, my stuff never feels "good enough". :)

Code:

---

<script type="text/javascript">
<![CDATA[//><!--
        window.addEvent('domready', function() {
               
                // Select all the Accordion Elements
                var accordions = $$('.ce.accordion');
                var accordionGroups = [];
                var start = 0;
               
                // Group elements into an array if they are all adjacent
                accordions.each( function(el, id) {
                        if( id == start )el.addClass('first');
                        if( !el.getNext() || el.getNext() != accordions[id + 1]) {
                                accordionGroups.push( accordions.slice( start, id + 1 ) );
                                el.addClass('last');
                                start = id + 1;       
                        }
                });
               
                // Add the accordion to each group
                accordionGroups.each( function( el, id ) {
                        var accordion = new Accordion(
                                el.map( function( innerEl, innerId ) {
                                        return innerEl.getElement('div.toggler').addClass('closed');
                                }),
                                el.map( function( innerEl, innerId ) {
                                        return innerEl.getElement('div.accordion');
                                }), {
                                        display: -1,
                                        alwaysHide: true,
                                        opacity: false
                                }
                        );
                       
                        // Toggle open and closed styles to control arrow indicator
                        accordion.addEvents({
                                onActive: function( toggler, element ) {
                                        toggler.removeClass('closed');
                                        toggler.addClass('open');
                                },
                                onBackground: function( toggler, element) {
                                        toggler.removeClass('open');
                                        toggler.addClass('closed');
                                }
                        });
                });
        });
//--><!]]>
</script>

---