EXT: JavaScript Accordion - based on TinyAccordion

Extension Key: tinyaccordion

Keywords: accordion, content, elements

Copyright 2025, Kurt Gusbeth

This document is published under the Open Content License

available from https://www.opencontent.org/opl.shtml

The content of this document is related to TYPO3

Introduction

What does it do?

A very easy to use extension to display content elements (tt_content), pages and content elements or news elements as an accordion. Put some text-content- elements (with pictures) or news-records into a folder and this extension will display them all as an accordion. The extension is flexible too, because it can be configured and you can use other JavaScript plugins too (e.g. jQuery UI Accordion). Supported tt_content elements: text, textpic, textmedia and table. By default every template can be used with TinyAccordion or jQuery UI Accordion (you need to include this file by your own). Could be used for FAQs. It uses the TinyAccordion-JavaScript file from a website, that does not exist anymore. You find a demo here:

www.quizpalme.de/faq

Screenshots

Some examples:

Users manual

Install the extension and include the static TypoScript (from extensions). The static TypoScript loads the default settings. They can be changed later (see chapter Configuration).

Create a folder with several content elements (text or text with picture; the header should be hidden) or news elements and categories. Note: you can select pages or tt_content elements from everywhere. Add the plugin to the page where the accordion should appear. Select some pages or the folder with the tt_content or news elements at the bottom of the plug-in-settings.

Select in the plug-in what you want to display: pages, tt_content, news or Camaliga as db-table

FAQ

I don´t want to select a folder on every page. Is there no other way?

• If you don´t specify a “Record Storage Page”, the extension will select the first sub-folder of the current page for you.

The news are not displayed properly.

• You will need the categories. They are displayed first.

I see the header of the content element twice! Whats wrong?

• You must set one header to “hidden” (Type).

I don't see the header of the content element! Whats wrong?

• Its hidden by default. Make it visible via StyleSheets.

Administration

You can configure many things of this extension:

• TypoScript: see chapter Configuration/Reference.
• JavaScript file: you can use other JavaScript plugins too. Default path: Resources/Public/Scripts. See chapter Configuration/Reference.
• CSS file: you find an example in the TypoScript configuration of this extension. Path: Configuration/TypoScript/setup.txt. See chapter Configuration/Reference.
• HTML file: you find several examples in the Resources/Private/Templates/Selection folder of this extension. See chapter Configuration/Reference.

FAQ

I want to change the layout. How can I do that?

• Copy the HTML file and/or the CSS to your fileadmin/extension-folder and edit them. Then change the path to that files via TypoScript. See next chapter...

I can see text/images in the background. Whats wrong?

• In this case you need to add the style "opacity:0;" to <div class="acc-section">.

I get a JavaScript error. Whats wrong?

• The JavaScript is not included properly. See next chapter...

Configuration

You can configure this extension to use tt_content, pages + tt_content, news or Calamiga-elements as database table. You should think about how the result should looks like. If you need a result like in “Example 1” (flat hierarchy), you must use tt_content else you must use pages, news or Camaliga elements. See chapter Reference below for the whole TypoScript configuration.

FAQ

I want to use news. How can I do that?

• Select “news” in the plugin configuration.

I see no elements on the page. Whats wrong?

• Have you selected the folder with the elements? If you use news: do you use categories? Every news must have at least one category.

Reference

Short reference of TypoScript options for plugin.*tx_tinyaccordion (there are some more settings available):

Example:

 plugin.tx_tinyaccordion {
view {
	templateRootPaths {
		0 = EXT:tinyaccordion/Resources/Private/Templates/
		1 = fileadmin/Resources/tinyaccordion/templates/
	}
}
 }

If you want to change the styles: copy them from the TypoScript-file (Configuration/TypoScript/setup.txt) to your own css-file and remove the default-styles:

plugin.tx_tinyaccordion._CSS_DEFAULT_STYLE >

Note: the default JavaScript-file is included like this in the templates via a new ViewHelper:

{namespace tiny=Quizpalme\Tinyaccordion\ViewHelpers}
<tiny:addPublicResources path="EXT:tinyaccordion/Resources/Public/Scripts/packed.js"></tiny:addPublicResources>

If this doesn´t work or if you want to include another JavaScript- file, copy the JavaScript-file to your fileadmin-folder and remove the default JavaScript and include your own JavaScript via TypoScript like this:

page.includeJS.tx_tinyaccordion = fileadmin/templates/Scripts/tinyaccordion.js

There are more settings:

plugin.tx_tinyaccordion.settings.flexform.*

They are used e.g. in the News.html and Camaliga.html template.

plugin.tx_tinyaccordion.view.templateRootPath = fileadmin/template/tinyaccordion/

plugin.tx_tinyaccordion._CSS_DEFAULT_STYLE >

plugin.tx_tinyaccordion.view.templateRootPaths.1 = fileadmin/template/files/

Tutorial

You should think first about the layout of the accordion. If you use tt_content elements, only the header and the bodytext will be displayed. If you use pages and tt_content elements, then the page title will be displayed first. After clicking at the page title, you will see the content elements of that page. If you use news, the categories are displayed first, that´s why every news needs at least one category. After clicking at a category, all news-titles are shown. Than you can click at a news-title.

Put your content elements to a folder and select that folder in the plugin.

You can change the layout of the result. See chapter “Administration”.

Known problems

In some cases you will see the title twice.

Solution: hide one title with a CSS class or style.

Updating to ver. 6.0.0

If you are updating from a version < 6.0.0, you must change your custom template-file or your TypoScript, because this TypoScript line was removed:

page.includeJS.tx_tinyaccordion = {$plugin.tx_tinyaccordion.settings.jsFile}

You can add that line to your TypoScript, if you do not use jQuery UI, or you can add this 2 lines at the beginning of your custom template:

{namespace tiny=Quizpalme\Tinyaccordion\ViewHelpers}
<tiny:addPublicResources path="EXT:tinyaccordion/Resources/Public/Scripts/packed.js"></tiny:addPublicResources>

ChangeLog

Sitemap