We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Accordion menu with 3 levels

    • 26931
    • 2,314 Posts
    anonymized-26931 Reply #11, 16 years, 3 months ago
    and with your fancypant menu, is it the same?
    no, you can use the container resources
      • 30672
      • 180 Posts
      troubadour Reply #12, 16 years, 3 months ago
      ok, il will use the first menu, and just add a first subpage with the content i would have put in the container, not a big problem.

      just one last question (for this topic grin) :

      is it possible to add a "close" event when i click on an opened container (to make it close, i mean) ?
        • 26931
        • 2,314 Posts
        anonymized-26931 Reply #13, 16 years, 3 months ago
        is it possible to add a "close" event when i click on an opened container (to make it close, i mean) ?
        replace &outerClass=`menu` in your wayfinder call with &outerTpl=`acc-outer`.create a new chunk "acc-outer" 
        <ul class="menu collapsible">
	[+wf.wrapper+]
</ul>

        and change the already existing chunk "acc-inner" to: 
        <ul class="acitem collapsible">
	[+wf.wrapper+]
</ul>
        ...that should do it
          • 30672
          • 180 Posts
          troubadour Reply #14, 16 years, 3 months ago
          Thank you very much, i will try it!

          by the way, i would like to use the same accordion effect (or better with mootools?) for the content of some pages.


          i have a page x which contains child pages (hidden in the menu)and i would like to display the title and content of child pages on page x with an accordion effect.

          do you think it’s possible?

          i saw your great tutos on your site, where you use tabControl, but not accordion...

          thanks again!


            • 26931
            • 2,314 Posts
            anonymized-26931 Reply #15, 16 years, 3 months ago
            i have a page x which contains child pages (hidden in the menu)and i would like to display the title and content of child pages on page x with an accordion effect.
            sure, that’s actually quite easy to do with Ditto, but right now i don’t have much time to write a tut
              • 30672
              • 180 Posts
              troubadour Reply #16, 16 years, 3 months ago
              Quote from: sharkbait at Jul 21, 2010, 02:55 AM

              the page that has the "rel=category" to make it the container of sub-pages cannot be displayed.
              is there something to make it viewable?
              no, i don’t think so. afaik that’s how all javascript accordions work

              is it possible that when i click on the container, the first child page appears?
                • 30672
                • 180 Posts
                troubadour Reply #17, 16 years, 3 months ago
                and do you know how to highlight the current displayed page by changing the color of its name in the menu ?

                by defaut, only the parent pages (first and/or second level change their background).

                thank you very much!
                  • 26931
                  • 2,314 Posts
                  anonymized-26931 Reply #18, 16 years, 3 months ago
                  and do you know how to highlight the current displayed page by changing the color of its name in the menu ?
                  it’s all in your css. e.g.
                  /* second level active */
ul.menu li ul li.active a {
	color: yellow;
	padding-left: 15px;
	}
/* third level active */
ul.menu li ul li ul li.active a {
	color: blue;
	}

                  is it possible that when i click on the container, the first child page appears?
                  don’t think so. JS accordions don’t work that way. Since the container resource doesn’t get parsed when clicked ( if it would, you wouldn’t have the animated accordion effect ) [!FirstChildRedirect!] has no effect
                    • 30672
                    • 180 Posts
                    troubadour Reply #19, 16 years, 3 months ago
                    thank you very much!

                    i tried something for showing childpages in accordion way, it’s almost working:

                    here is the code that i place in the parent page :

                    [[Ditto? &parents=`[*id*]` &tpl=`content_block` &noResults=` ` &orderBy=`menuindex ASC` ]]

                    and at the end of the page, before body tag:

                    <script type="text/javascript">
                    <!--
                    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
                    //-->
                    </script>

                    here is the chunk called content_block:

                    <div id="Accordion1" class="Accordion" tabindex="0">
                    <div class="AccordionPanel">
                    <div class="AccordionPanelTab">[+title+]</div>
                    <div class="AccordionPanelContent">[+content+]</div>
                    </div>
                    </div>

                    to do that, i used js and css file from adobe (since i bought these products, why not use them grin)

                    <link rel="stylesheet" type="text/css" media="all" href="assets/templates/general/SpryAccordion.css" />
                    <script type="text/javascript" src="assets/js/SpryAccordion.js"></script>

                    the result ?

                    it displays my childpages well, title in the tab and content in the panel content, but nothing is animated...

                    if someone has an idea why...