.. You may want to use the usual include line. Uncomment and adjust the path. .. include:: ../Includes.txt ================ EXT: rgaccordion ================ :Author: Kasper Skårhøj :Created: 2002-11-01T00:32:00 :Changed: 2007-10-11T15:26:43 :Author: Georg Ringer :Email: http://www.just2b.com :Info 3: :Info 4: .. _EXT-rgaccordion: EXT: rgaccordion ================ Extension Key: **rgaccordion** Copyright 2000-2002, Georg Ringer, This document is published under the Open Content License available from http://www.opencontent.org/opl.shtml The content of this document is related to TYPO3 \- a GNU/GPL CMS/Framework available from www.typo3.com .. _Table-of-Contents: Table of Contents ----------------- **EXT: rgaccordion 1** **Introduction 1** What does it do & Demonstration 1 Screenshots 1 **Users manual 3** **Configuration 3** rgaccordion I 3 rgaccordion II 3 **Advanced configuration 4** rgaccordion I 4 rgaccordion II 4 rgaccordion & TemplaVoila 4 rgaccordion in a menu 4 **Known problems 5** **You like the extension? 5** **To-Do list 5** **Changelog 5** .. _Introduction: Introduction ------------ .. _What-does-it-do-Demonstration: 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: Screenshots ^^^^^^^^^^^ For a real impression, look at the given links above! |img-1| **Image 1:** The checkbox for rgaccordion I. Activate it to get the rgaccordion for this CE. |img-2| **Image 2:** 4 content elements in an accordion and the 2 :sup:`nd` element is opened. |img-3| **Image 3:** rgaccordion as a menu. See the section “rgaccordion in a menu” for more information. .. _Users-manual: Users manual ------------ To get this extension started is very easy! Download and install the extension. Download and install the extension t3mootools. Follow the steps of the manual of t3mootools but in short take these steps: Enter the Backend module “T3 Mootools” and select the view “Process & Analyze t3mootools.txt in extensions”. Select all available extensions but at least “rgaccordion" and press “Check”. Scroll down at the redirected page to the bottom and click “Merge & Use”. Scroll down at the redirected page and click “Create Mootools Library” Take a look at the section configuration (in this manual). .. _Configuration: Configuration ------------- Both modes use the same cObj **“CONTENT”** . So you can use the accordion everywhere where you use this cObj!. Examples are: - Content elements of a column - Content elements of a special page .. _rgaccordion-I: 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. .. _FAQ: FAQ """ **Q:** How can I render every content element as accordion? **A:** Take the line: plugin.tx\_rgaccordion1.stdWrap.outerWrap.fieldRequired > **Q:** I want to change the path of the CSS file. How? **A:** Just change the page.include.CSS.fileXX to anywhere you want. .. _rgaccordion-II: 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 =
|
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. .. _Advanced-configuration: 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: rgaccordion I ^^^^^^^^^^^^^ The HTML needs to look like this ::

Title 1

The content 1

Title 1

The content 1
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: rgaccordion II ^^^^^^^^^^^^^^ The HTML needs to look like this: ::

Title 1

The content 1

Title 2

The content 2
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: 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. :: | 10.conf.tt_content < plugin.tx_rgaccordion2 10.conf.tt_content.stdWrap.wrap =
|
]]> 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: 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 =
    |
noBlur = 1 expAll = 1 NO = 1 NO.wrapItemAndSub =
  • |
    • NO.linkWrap = | IFSUB <.NO IFSUB.linkWrap = | IFSUB.doNotLinkIt = 1 ACTIFSUB <.NO ACTIFSUB.linkWrap = | } 2 <.1 2 { wrap =
      |
    NO.linkWrap > IFSUB.linkWrap = | ACTIFSUB.linkWrap = | } 3 <.2 3 { wrap =
      |
    } } # 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). .. _Known-problems: Known problems -------------- If you got troubles with the Internet Explorer not collapsing/expanding the levels, use the following TS :: #TS Code [browser = msie] - :: config.doctypeSwitch = 1 :: [global] - It is not really possible to use more than one javascript library at the same website. So if you use e.g. prototype you will get troubles with Mootools and the other way round. - If you want to change the class/id names you also need to change them in the javascript files because this is hardcoded to make the extension as simple as possible! .. _You-like-the-extension: **You like the extension?** --------------------------- If you like this extension, you can do one or more of the following things: Write me a mail or create a posting at the demo websites and express your feelings Please rate the extension in the Repository: `http://typo3.org/extensions/ `_ search for rgaccordion, click on the title and then at “Ratings” (You need to be registered and logged in at typo3.org) – this just takes 1min and I like good ratings. Donate something, so that I can write those kind of extensions for you. More information is here: German: `http://www.rggooglemap.com/menu/spende.html `_ and English: `http://www.rggooglemap.com/en/2/donate.html `_ . Thanks! .. _To-Do-list: To-Do list ---------- \- Nothing planned but if you got an idea, you can tell me. .. _Changelog: Changelog --------- \- 1.1.1. Manual update. Hint for IE6 troubles \- 1.1.0. Added a TV section \- 1.0.2. Changed manual concerning including the file order, sorry guys! \- 1.0.1. Manual update \- 1.0.0. Initial release – nothing else planned. |img-4| EXT: rgaccordion - 5 .. ######CUTTER_MARK_IMAGES###### .. |img-1| image:: img-1.png .. :align: left .. :border: 0 .. :height: 108 .. :id: Grafik1 .. :name: Grafik1 .. :width: 191 .. |img-2| image:: img-2.png .. :align: left .. :border: 0 .. :height: 496 .. :id: Grafik2 .. :name: Grafik2 .. :width: 593 .. |img-3| image:: img-3.png .. :align: left .. :border: 0 .. :height: 247 .. :id: Grafik3 .. :name: Grafik3 .. :width: 211 .. |img-4| image:: img-4.png .. :align: left .. :border: 0 .. :height: 32 .. :id: Graphic1 .. :name: Graphic1 .. :width: 102