Results 1 to 16 of 16

Thread: Starting accordions closed on a page

  1. #1
    New user
    Join Date
    03-08-10.
    Posts
    22

    Default 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

  2. #2
    New user
    Join Date
    02-26-10.
    Posts
    18

    Default Re: Starting accordions closed on a page

    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.

  3. #3
    New user
    Join Date
    02-26-10.
    Posts
    18

    Default Re: Starting accordions closed on a page

    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.

    :?:

  4. #4
    User taca's Avatar
    Join Date
    06-20-09.
    Location
    Kyoto, Japan
    Posts
    111

    Default Re: Starting accordions closed on a page

    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.
    --
    Takahiro Kambe

  5. #5
    New user
    Join Date
    03-08-10.
    Posts
    22

    Default Re: Starting accordions closed on a page

    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

  6. #6
    New user
    Join Date
    02-26-10.
    Posts
    18

    Default Re: Starting accordions closed on a page

    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.


  7. #7
    New user
    Join Date
    03-08-10.
    Posts
    22

    Default Re: Starting accordions closed on a page

    ... 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

  8. #8
    User taca's Avatar
    Join Date
    06-20-09.
    Location
    Kyoto, Japan
    Posts
    111

    Default Re: Starting accordions closed on a page

    --
    Takahiro Kambe

  9. #9
    New user
    Join Date
    03-08-10.
    Posts
    22

    Default Re: Starting accordions closed on a page

    Thanks once again Taca. You just saved my day!

    /Andreas

  10. #10
    User
    Join Date
    02-01-10.
    Posts
    111

    Default Re: Starting accordions closed on a page

    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

  11. #11
    Community-Moderator xchs's Avatar
    Join Date
    06-20-09.
    Posts
    1,287

    Default Re: Starting accordions closed on a page

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

  12. #12
    User
    Join Date
    02-01-10.
    Posts
    111

    Default Re: Starting accordions closed on a page

    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.

  13. #13
    User taca's Avatar
    Join Date
    06-20-09.
    Location
    Kyoto, Japan
    Posts
    111

    Default Re: Starting accordions closed on a page

    BTW, why "close all" template was removed?
    --
    Takahiro Kambe

  14. #14
    User
    Join Date
    02-01-10.
    Posts
    111

    Default Re: Starting accordions closed on a page

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

  15. #15
    User taca's Avatar
    Join Date
    06-20-09.
    Location
    Kyoto, Japan
    Posts
    111

    Default Re: Starting accordions closed on a page

    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.
    --
    Takahiro Kambe

  16. #16
    Experienced user
    Join Date
    08-21-09.
    Posts
    563

    Default Re: Starting accordions closed on a page

    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>
    Brian

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •