Creighton Students
Manual Home  >  Typo3 assistance  >  Help working with content  >  Types of Content  >  JF Multicontent  >  How To!  >  An Accordion
How to create an accordion layout of your content

See an example of this


Page Contents:

Adding a plugin to your page

Go ~ here ~ for instructions on adding new content to your page.

On the General Tab select plugin from the Type select list:

Choosing Content to show

Content can all be on one page or from several pages.  Image for the slider should be the same size though.  Each tab/accordion section/slider/ is one content element.  You cannot do this if all images/content is in one content element.  Each section has to be in it's own content element.

To choose the content to show using this plugin you'll first click the small folder icon "Browse for records".

You'll get a popup window displaying your pagetree.  Click on the page that has your content you want to use.  On the left you'll then see the available content, click on the + next to the content title.  If you have not given your content a header, "no title" will display here.

Click image for full size:

 Once you have your content chosen you can go onto choosing the plugin style.

Using inline content

What is inline content?  It's content that you place on the same page as the plugin.  Why would you want to do this?  The best reason is that content on separate pages might be found by a search engine.  With the content all on your plugin page, the search engine will find it not pages elsewhere. 

To do this:

On the plugin tab of the content element in the "general" tab of the plugin you'll see "View" and below it a select list with "Contents" at the top.  This is how you would add content from external pages (see above).  Change this to "inline content".

You'll be asked if it is alright for the page to refresh and show new fields.  Choose "OK" (really you want to do it).

You'll then get "Create new Pagecontent" text and icon. 

You'll be given the exact same options as if you were adding content in the page module or the list module.  Add your content and save it.  You'll get another "Create new Pagecontent" above the one you just created.


You can add as much content as you want to work with within the plugin.



Editing Inline content

If you are using inline content (content on the same page as the plugin), there are a couple of things you'll need to know to edit that content.

1.  From the page module, you won't see the content.  You'll have to click the plugin edit button to get to it from the page module.

2.  From the view module you can edit either content elements or the plugin itself.  To edit either content element, must mouse over it. 

Click image for full size:

To edit the plugin, mouse over the space between the two content elements:

3.  In the list module you can easily see both the content elements and the plugin.  Since the two content elements were created in the plugin, they won't show on the page without the plugin:

Accordion Options

  1. "Auto height": If set, all contents will be the same height - I prefer this off as one long section will make all long.

  2. "Collapsible": You can "close" the accordion, if you click the active item again.

  3. "Closed at startup": The accordion will be closed by default.

  4. "Opened content": Defines the content witch is opened at startup (will not work, if "Closed at startup" is active).  Items are counted from zero, so 4 items would be counted 0,1,2,3

  5. "Open random content": Check if you like to show the content randomly

  6. "Event": Defines the mouse event that the accordion will respond to.

  7. "Animation": Witch transition will be used for animation (slide or bounceslide)

  8. "Type of Transition" Choose from (Swing, Linear, Quad, Cubic, Quart, Quint, Sine, Expo, Circ, Back, Bounce, Elastic ) - I've not had time to explore these, please try them out.

  9. "Direction of Transition": in - out or in/out.

  10. Duration of transition (in milliseconds)
  11. "Delay for autoplay (in ms)": Delay in milliseconds before the the next content is shown

Creighton University