• Sat. Dec 21st, 2024

Accordian, spoiler & anchors

  • Home
  • Accordian, spoiler & anchors

Basic accordion

[accordion][spoiler title=”Spoiler title”] Spoiler content [/spoiler][spoiler title=”Spoiler title”] Spoiler content [/spoiler][spoiler title=”Spoiler title”] Spoiler content [/spoiler][/accordion]

Fancy accordion

[accordion][spoiler title=”Spoiler title” style=”fancy”] Spoiler content [/spoiler][spoiler title=”Spoiler title” style=”fancy”] Spoiler content [/spoiler][spoiler title=”Spoiler title” style=”fancy”] Spoiler content [/spoiler][/accordion]

Accordion with open spoiler

[accordion][spoiler title=”Spoiler title” open=”yes”] Spoiler content [/spoiler][spoiler title=”Spoiler title”] Spoiler content [/spoiler][spoiler title=”Spoiler title”] Spoiler content [/spoiler][/accordion]

Different spoiler styles

[spoiler title=”Spoiler title” style=”default”] Spoiler content [/spoiler][spoiler title=”Spoiler title” style=”fancy”] Spoiler content [/spoiler][spoiler title=”Spoiler title” style=”simple”] Spoiler content [/spoiler]

Open spoilers

[spoiler title=”Spoiler title” style=”default” open=”yes”] Spoiler content [/spoiler][spoiler title=”Spoiler title” style=”fancy” open=”yes”] Spoiler content [/spoiler][spoiler title=”Spoiler title” style=”simple” open=”yes”] Spoiler content [/spoiler]

Spoilers with anchors (see the code)

[spoiler title=”Spoiler title” anchor=”Spoiler-1″] Spoiler content [/spoiler][spoiler title=”Spoiler title” anchor=”Spoiler-2″] Spoiler content [/spoiler][spoiler title=”Spoiler title” anchor=”Spoiler-3″] Spoiler content [/spoiler]

Use next links to open this spoilers

Open spoiler 1 | Open spoiler 2 | Open spoiler 3

Accordion + Spoilers + Anchors (see the code)

[accordion][spoiler title=”Spoiler title” anchor=”Accordion-1″] Spoiler content [/spoiler][spoiler title=”Spoiler title” anchor=”Accordion-2″] Spoiler content [/spoiler][spoiler title=”Spoiler title” anchor=”Accordion-3″] Spoiler content [/spoiler][/accordion]

Use next links to expand accordion items

Open spoiler 1 | Open spoiler 2 | Open spoiler 3

Different icons

[accordion][spoiler title=”plus” icon=”plus”] Spoiler content [/spoiler][spoiler title=”plus-circle” icon=”plus-circle”] Spoiler content [/spoiler][spoiler title=”plus-square-1″ icon=”plus-square-1″] Spoiler content [/spoiler]
[spoiler title=”plus-square-2″ icon=”plus-square-2″] Spoiler content [/spoiler][spoiler title=”arrow” icon=”arrow”] Spoiler content [/spoiler][spoiler title=”arrow-circle-1″ icon=”arrow-circle-1″] Spoiler content [/spoiler][spoiler title=”arrow-circle-2″ icon=”arrow-circle-2″] Spoiler content [/spoiler][spoiler title=”caret” icon=”caret”] Spoiler content [/spoiler][spoiler title=”caret-square” icon=”caret-square”] Spoiler content [/spoiler][spoiler title=”folder-1″ icon=”folder-1″] Spoiler content [/spoiler][spoiler title=”folder-2″ icon=”folder-2″] Spoiler content [/spoiler][/accordion]

Custom styles

[spoiler title=”Spoiler title” class=”my-custom-spoiler”] Spoiler content [/spoiler]

Basic accordion
[[accordion]
[spoiler title="Spoiler title"] Spoiler content [/spoiler]
[spoiler title="Spoiler title"] Spoiler content [/spoiler]
[spoiler title="Spoiler title"] Spoiler content [/spoiler]
[/accordion]]

Fancy accordion

[[accordion]
[spoiler title="Spoiler title" style="fancy"] Spoiler content [/spoiler]
[spoiler title="Spoiler title" style="fancy"] Spoiler content [/spoiler]
[spoiler title="Spoiler title" style="fancy"] Spoiler content [/spoiler]
[/accordion]]

Accordion with open spoiler

[[accordion]
[spoiler title="Spoiler title" open="yes"] Spoiler content [/spoiler]
[spoiler title="Spoiler title"] Spoiler content [/spoiler]
[spoiler title="Spoiler title"] Spoiler content [/spoiler]
[/accordion]]

Different spoiler styles

[[spoiler title="Spoiler title" style="default"] Spoiler content [/spoiler]] [[spoiler title="Spoiler title" style="fancy"] Spoiler content [/spoiler]] [[spoiler title="Spoiler title" style="simple"] Spoiler content [/spoiler]]

Open spoilers

[[spoiler title="Spoiler title" style="default" open="yes"] Spoiler content [/spoiler]] [[spoiler title="Spoiler title" style="fancy" open="yes"] Spoiler content [/spoiler]] [[spoiler title="Spoiler title" style="simple" open="yes"] Spoiler content [/spoiler]]

Spoilers with anchors (see the code)

[[spoiler title="Spoiler title" anchor="Spoiler-1"] Spoiler content [/spoiler]] [[spoiler title="Spoiler title" anchor="Spoiler-2"] Spoiler content [/spoiler]] [[spoiler title="Spoiler title" anchor="Spoiler-3"] Spoiler content [/spoiler]] Use next links to open this spoilers Open spoiler 1 | Open spoiler 2 | Open spoiler 3

Accordion + Spoilers + Anchors (see the code)

[[accordion] [[spoiler title="Spoiler title" anchor="Accordion-1"] Spoiler content [/spoiler]] [[spoiler title="Spoiler title" anchor="Accordion-2"] Spoiler content [/spoiler]] [[spoiler title="Spoiler title" anchor="Accordion-3"] Spoiler content [/spoiler]] [/accordion]] Use next links to expand accordion items Open spoiler 1 | Open spoiler 2 | Open spoiler 3

Different icons

[[accordion] [spoiler title="plus" icon="plus"] Spoiler content [/spoiler] [spoiler title="plus-circle" icon="plus-circle"] Spoiler content [/spoiler] [spoiler title="plus-square-1" icon="plus-square-1"] Spoiler content [/spoiler] [spoiler title="plus-square-2" icon="plus-square-2"] Spoiler content [/spoiler] [spoiler title="arrow" icon="arrow"] Spoiler content [/spoiler] [spoiler title="arrow-circle-1" icon="arrow-circle-1"] Spoiler content [/spoiler] [spoiler title="arrow-circle-2" icon="arrow-circle-2"] Spoiler content [/spoiler] [spoiler title="caret" icon="caret"] Spoiler content [/spoiler] [spoiler title="caret-square" icon="caret-square"] Spoiler content [/spoiler] [spoiler title="folder-1" icon="folder-1"] Spoiler content [/spoiler] [spoiler title="folder-2" icon="folder-2"] Spoiler content [/spoiler] [/accordion]] 

Custom styles

 [[spoiler title="Spoiler title" class="my-custom-spoiler"] Spoiler content [/spoiler]] [

]

Leave a Reply

Your email address will not be published.