Introduction#

This JSPWikiStyle allows you to add horizontal or vertical accordion sections to your wiki pages. An accordion is an animated set of tabs. When clicking one of the tabs, all others are being closed with a smooth visual transition effect.

There are several accordion flavours:

• %%accordion: standard accordion with tabs positioned vertically. (example) This is great for LeftMenu's
  When used with a single tab, you can use this as a replacement of a Collapsible Box
• %%tabbedAccordion, %%pillsAccordion: tabs are positioned horizontally, similar to the Tabbed Sections but with animated transitions
• %%leftAccordion and %%rightAccordion: the tabs are positioned at the left or right side of the tab contents like a tabbed book.

Standard Accordion#

All tabs are stacked vertically. Clicking a tab will slide the tab pane vertically in or out.

Add a %%accordion around all tabs and start each tab with %%tab-<tab-name>. The name of a tab may only contain alphanumeric characters and a dash; but no other punctuations. It may not start with a digit.

When the page loads, only the first tab will be visible. All other tabs are hidden, until you click the corresponding tab.

Note: when printing, only the visible tabs are shown.

%%accordion
%%tab-FirstTab
...
/%
%%tab-SecondTab
...
/%
/%

---

This is is just some sample %%accordion. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

Inside header#

This is is just some sample %%accordion. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

This is is just some sample %%accordion. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

New Simplified markup is also supported !

%%accordion
!First Tab
...
!Second Tab
...
/%

---

First Tab#

This is is just some sample %%accordionwith simplified markup.
Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

Second Tab#

Inside Headers#

Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

Accordions with one tab are very similar to a Collapsible Box

%%accordion
!Collapsible Box
This looks very similar to a [Collapsible Box]
/%

Accordion with other colors.#

This is is just some sample %%accordion-success-close. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

Inside header#

This is is just some sample %%accordion. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

This is is just some sample %%accordion. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

Tabbed Accordion#

This accordion variant generates a set of horizontal tabs with accordion effect. It is similar to Tabbed Sections but the transition between the tabs is gradual with a fading effect.

%%tabbedAccordion
%%tab-FirstTopic
...
/%
%%tab-SecondTopic
...
/%
/%

---

This is is just some sample %%accordion. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

Inside header#

This is is just some sample %%accordion. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

This is is just some sample %%accordion. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

Tabbed Accordion with Pills layout#

The %%pillsAccordion is similar to the tabbed variant, but with a different layout.

%%pillsAccordion
!First Topic
...
!Second Topic
...
/%

---

First Tab#

This is is just some sample %%accordion. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

Second Tab#

Inside header#

This is is just some sample %%accordion. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

Third Tab#

This is is just some sample %%accordion. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

Side Accordion#

This accordion variant generates a set of vertical tabs with accordion effect. It is similar to a Tabbed Accordion, but the tabs appear at the left or right side instead of the top of the content. You can use %%leftAccordion or %%rightAccordion

Left side accordion

This is is just some sample %%accordion. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

Inside header#

This is is just some sample %%accordion. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

This is is just some sample %%accordion. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

---

Right side accordion

This is is just some sample %%accordion. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

Inside header#

This is is just some sample %%accordion. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.

This is is just some sample %%accordion. Don’t even bother reading it; you will just waste your time. Why do you keep reading? Do I have to use Lorem Ipsum to stop you? OK, here goes: Lorem ipsum dolor sit amet, consectetur adipi sicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Still reading? Gosh, you’re impossible. I’ll stop here to spare you.