EXT: rgaccordion¶

What does it do & Demonstration¶

The Extension rgaccordion consists of 2 different modes which do basically the same but still with some differences. Both take normal content elements (like “Text”, “Text w Image” or plugins) and show them in an accordion. It is just perfect for long pages.

• rgaccordion I : You can select different content elements in the Backend (with a checkbox) to make them possible to fold and to expand again. The content elements don't react with another one!Demo in German: http://www.rggooglemap.com/dev/rgaccordion.html Demo in English: http://www.rggooglemap.com/en/dev/rgaccordion.html
• rgaccordion II: You select a whole column with TS and all content elements of this column are displayed in the accordion. If a content element gets selected, it expands and all others of these accordion get closed.Demo in German: http://www.rggooglemap.com/dev/rgaccordion2.html Demo in English: http://www.rggooglemap.com/en/dev/rgaccordion.html
• rgaccordion in a menu: You can use the script of this extension in many different ways, like in your own extension, in existing extensions or in menus. There are examples on my website for
  • EXT tt_news: http://www.rggooglemap.com/en/dev/rgaccordion/tt- news.html & http://www.rggooglemap.com/en/dev/rgaccordion2/tt- news.html
  • in a menu: http://www.rggooglemap.com/dev/rgaccordion2/in-ein-menue- intergriert.html

The extension t3mootools is required for rgaccordion I & II!

Screenshots¶

For a real impression, look at the given links above!

Image 1: The checkbox for rgaccordion I. Activate it to get the rgaccordion for this CE.

Image 2: 4 content elements in an accordion and the 2 ^nd element is opened.

Image 3: rgaccordion as a menu. See the section “rgaccordion in a menu” for more information.

rgaccordion I¶

To use this mode you just need the following lines. Only these content elements in which the checkbox “Accordion” (at the top right corner) is checked the accordion will get shown.

# Activate rgaccordion for the main column
page.10.subparts.TPL_CONTENT.renderObj  < plugin.tx_rgaccordion1

# Include the JS and CSS (demo) files
page.includeCSS.file57 = EXT:rgaccordion/res/rgaccordion1.css
page.includeJS.file51  = EXT:t3mootools/res/mootoolsv1.11.js
page.includeJS.file52  = EXT:rgaccordion/res/rgaccordion1.js

Explanation

“subparts.TPL_CONTENT” stands for the subpart where you want to use it! This depends on your template.

rgaccordion II¶

To use this mode you just need the following lines. All content elements of the cObj CONTENT(e.g. all CE of a column) are rendered in one accordion.

# Activate rgaccordion for the main column
page.10.subparts.TPL_CONTENT.wrap = <div id="rgaccord2-nest">|</div>
page.10.subparts.TPL_CONTENT.renderObj < plugin.tx_rgaccordion2


# Include the JS and CSS files
page.includeCSS.file57 = EXT:rgaccordion/res/rgaccordion2.css
page.includeJS.file51  = EXT:t3mootools/res/mootoolsv1.11.js
page.includeJS.file52  = EXT:rgaccordion/res/rgaccordion2.js

Explanation

“subparts.TPL_CONTENT” stands for the subpart where you want to use it! This depends on your template.

rgaccordion I¶

The HTML needs to look like this

<div class=”rgaccord1-nest”>
        <h3 class=”rgaccord1-toggle”> Title 1</h3>
        <div class=”rgaccord1-content”>
                The content 1
        </div>
</div>
<div class=”rgaccord1-nest”>
        <h3 class=”rgaccord1-toggle”> Title 1</h3>
        <div class=”rgaccord1-content”>
                The content 1
        </div>
</div>

I added a sample of this for tt_news which is saved in res/tmpl/tt _news-rgaccordion1.html but just for the list view! It looks like this in real: http://www.rggooglemap.com/dev/rgaccordion/tt-news.html

rgaccordion II¶

The HTML needs to look like this:

<div id=”rgaccord2-nest”>
        <h3 class=”rgaccord2-toggle”> Title 1</h3>
        <div class=”rgaccord2-content”>
                The content 1
        </div>
        <h3 class=”rgaccord2-toggle”> Title 2</h3>
        <div class=”rgaccord2-content”>
                The content 2
        </div>
</div>

I added a sample of this for tt_news which is saved in res/tmpl/tt _news-rgaccordion2.html but just for the list view! It looks like this in real: http://www.rggooglemap.com/dev/rgaccordion2/tt- news.html

rgaccordion & TemplaVoila¶

According to a comment on my website this is the way how it should work with TV. This is not tested by me but thanks to Daniel V.

<TypoScript><![CDATA[
10= RECORDS
10.source.current=1
10.tables = tt_content
10.wrap = <!--TYPO3SEARCH_begin--> | <!--TYPO3SEARCH_end-->
10.conf.tt_content < plugin.tx_rgaccordion2
10.conf.tt_content.stdWrap.wrap = <div id="rgaccord2-nest">|</div>
]]></TypoScript>

It would be great If someone could confirm this configuration and write a short note per mail or as comment on my website.

rgaccordion in a menu¶

The script of this extension can also be used to create a very nice menue. This could look like this in German http://www.rggooglemap.com/dev/rgaccordion2/in-ein-menue- intergriert.html and English http://www.rggooglemap.com/en/dev/rgaccordion2/integrated- in-a-menu.html .

You will also find a sample of this menu inside the extension directory ext/rgaccordion/res/menu/menu.html.

The needed TS for this is:

# TS Code
lib.accordionmenu = HMENU
lib.accordionmenu {

        1 = TMENU
        1 {
                wrap = <ul id="rgaccordmenu">|</ul>
                noBlur = 1
                expAll = 1

                NO = 1
                NO.wrapItemAndSub = <li>|</li>
                NO.linkWrap = <span class="empty">|</span>

                IFSUB <.NO
                IFSUB.linkWrap = <span class="toggle">|</span>
                IFSUB.doNotLinkIt = 1

                ACTIFSUB <.NO
                ACTIFSUB.linkWrap = <span class="open toggle">|</span>
        }

        2 <.1
        2 {
                wrap = <ul class="content">|</ul>
                NO.linkWrap >
                IFSUB.linkWrap = <span class="toggle2">|</span>
                ACTIFSUB.linkWrap = <span class="open toggle2">|</span>
        }

        3 <.2
        3 {
                wrap = <ul class="content2">|</ul>
        }
}

# Include the JS and CSS files
page.includeCSS.file7 = EXT:rgaccordion/res/menu/menu.css
page.includeJS.file1  = EXT:rgaccordion/res/menu/mootools.js
page.includeJS.file2  = EXT:rgaccordion/res/menu/menu.js

The values of the classes like “open”, “toggle”, “toggle2” need to stay like this as long as you don't change it in the needed js file too! “open” is required to open the current level (if selected).