Shortcodes: Toggle/Accordion/Tabs

Toggle

 

Toggle: Initial State “Closed”

[toggle title=”We make sure everything we do honors that connection”]

Compare to the body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fringilla, nulla sit amet volutpat adipiscing, enim velit molestie erat, nec ultricies nunc massa at arcu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fringilla, nulla sit amet volutpat adipiscing, enim velit molestie erat, nec ultricies nunc massa at arcu.

[/toggle]

Set of Toggles

[toggle title=”Communities to do business responsibly”]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fringilla, nulla sit amet volutpat adipiscing, enim velit molestie erat, nec ultricies nunc massa at arcu. Nulla fringilla, nulla sit amet volutpat adipiscing, enim velit molestie erat, nec ultricies nunc massa at arcu.Lorem ipsum dolor sit amet.

[/toggle]

[toggle title=”We put a ton of effort into providing top-notch WordPress tech support”]

Consectetur adipiscing elit. Nulla fringilla, nulla sit amet volutpat adipiscing, enim velit molestie erat, nec ultricies nunc massa at arcu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fringilla, nulla sit amet volutpat adipiscing, enim velit molestie erat, nec ultricies nunc massa at arcu.

[/toggle]

[toggle title=”You can use your own text here”]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fringilla, nulla sit amet volutpat adipiscing, enim velit molestie erat, nec ultricies nunc massa at arcu. Aipiscing, enim velit molestie erat, nec ultricies nunc massa at arcu.Lorem ipsum dolor sit amet,

[/toggle]

 

Toggle: Initial State “Opened”

[toggle title=”Toggle title goes here” state=”opened”]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fringilla, nulla sit amet volutpat adipiscing, enim velit molestie erat, nec ultricies nunc massa at arcu. Nulla fringilla, nulla sit amet volutpat adipiscing, enim velit molestie erat, nec ultricies nunc massa at arcu.Lorem ipsum dolor sit amet.

[/toggle]

Accordion

Accordion in fact is a set of Toggles, wrapped into [accordion] shortcode.

[accordion][toggle title=”Accordion item 1 title” state=”opened”]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fringilla, nulla sit amet volutpat adipiscing, enim velit molestie erat, nec ultricies nunc massa at arcu.

[/toggle]

[toggle title=”Accordion item 2 title”]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fringilla, nulla sit amet volutpat adipiscing, enim velit molestie erat, nec ultricies nunc massa at arcu.

[/toggle]

[toggle title=”Accordion item 3 title”]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fringilla, nulla sit amet volutpat adipiscing, enim velit molestie erat, nec ultricies nunc massa at arcu.

[/toggle] [/accordion]

Accordion is a web control that allows you to provide multiple panes and display them one at a time. It is like having several CollapsiblePanels where only one can be expanded at a time.

Tabs

We make sure everything we do honors that connection – from our commitment to the highest quality coffee in the world, to the way we engage with our customers and communities to do business responsibly. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla fringilla, nulla sit amet volutpat adipiscing, enim velit molestie erat, nec ultricies nunc massa at arcu.

Duis ut arcu tortor, quis vestibulum augue. Nam ut arcu eget nisl elementum aliquet at id ligula. Sed sit amet ligula in massa pharetra auctor quis rutrum magna. Erom our commitment to the highest quality coffee in the world, to the way we engage with our customers and communities to do business responsibly. Nam ut arcu eget nisl elementum aliquet at id ligula. Sed sit amet ligula in massa pharetra auctor quis rutrum magna. Erom our commitment to the highest quality coffee in the world, to the way we engage with our customers and communities to do business responsibly.

Ut congue, massa eget interdum ullamcorper, quam mi mattis metus, eu gravida sem dolor quis metus. In placerat varius erat ut bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit.