accordion image

I would like to add a triangle image to the accordion element. The image would be in front of the accordion element header - very much like the gray triangle icon in Contao's backend interface. The triangle would point to the header when the accordion is closed, but would point down when the accordion is open. So far I have not found a way to do this.

Thanks for the help!
Tonu

You can use CSS to do this. If I remember, the accordion has a different class applied to it depending on whether it's open or closed. So you'd just make two arrow images, and apply them as background images to header.

When I looked at the Music Academy website, I noticed a class: toggler_first that allowed me to change the styling of the accordion header. I also noticed a class toggler that allowed styling of the area around the accordion header. I did not see a class for the different states of the toggler. If I could define the open and closed states with the class, I should be good to go.

Hi Tonu,

found this in german community:

Make a new templates for the accordion, for e.g. mootools_mymoo.tpl and place this code into:

Code:

---

<script type="text/javascript">
<![CDATA[//><!--
window.addEvent('domready', function()
{
        this.accordion = new Accordion($$('div.toggler'), $$('div.accordion'),
        {
                display: false,
                alwaysHide: true,
                opacity: false,

                onActive: function(toggler, i)
                {
                        toggler.getFirst() ? toggler.getFirst().addClass('active') : toggler.addClass('active');
                        toggler.getFirst() ? toggler.getFirst().removeClass('inactive') : toggler.removeClass('inactive');
                },

                onBackground: function(toggler, i)
                {
                        toggler.getFirst() ? toggler.getFirst().removeClass('active') : toggler.removeClass('active');
                        toggler.getFirst() ? toggler.getFirst().addClass('inactive') : toggler.addClass('inactive');
                }
        });
});
//--><!]]>
</script>

---

Than you can assign an image to both states using css.

Thanks for the code! I thought something like this was necessary.

I am not quite sure how to apply the template to accordion element. When I choose the accordion element, it does not allow me to select a template. Also, I did not seemed to be able to create a module based on the template, at least I did not know how. The only other place that I could think of was to have the new template listed in page layout as one of the mootools options, but I wasn't sure how to have it show up there either.

Thanks for any pointers,
Tonu

Hi Tonu,

in the backend choose templates and click on new template. then scroll to find a mootools_accordion.tpl and save this.
Then rename it to mootools_my-accordion.tpl for e.g.
Then copy-paste the code above into this template.

Last step is to select this new template in page layout, section mootools templates (near to the border of the page).

Thanks for the quick response! This worked. I am on my way now.

Created the CSS statements for it and it works as intended. There was one small glitch that I was able to address fairly easily.

When the page with the accordion element is first loaded, it did not show the background image at all. The image only showed up when clicked on the accordion header. I think this is because the accordion element is in a collapsed state. In my case, I have multiple single accordion elements on the page and I wanted the first one to be expanded when the page is loaded. I removed

Code:

---

display: false,

---

line. This had two effects, the first accordion element is expanded and secondly, the background images are also showing up when the page is loaded.

Nice you got it working Tonu.