Login / Status
developer.Resource
Home . Documentation . Document Library . Extension Manuals
Sponsors
hosted by punkt.deTYPO3 and Open Source MagazineAOE Media

1.4. Advanced configuration

The extension or better the javascript behind it is not restricted to content elements only. You can use it everywhere, e.g. in your template or inside your extension. To make this happen you just need a little a little knowledge how the code needs to look like.

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= RECORDS10.source.current=110.tables = tt_content10.wrap = <!--TYPO3SEARCH_begin--> | <!--TYPO3SEARCH_end-->10.conf.tt_content < plugin.tx_rgaccordion210.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).