Tabs and Toggle Shortcodes - il Sentiero contemplativo

[hr]

Tabs

Tabs allow you to show more content on the page using less space. You can have as many tabs as needed. The container will auto-fill the width of the area where it is inserted.

[code][tabs]
[tab title=”Tab Title”]Tab content…[/tab]
[tab title=”Tab Title”]Tab content…[/tab]
[tab title=”Tab Title”]Tab content…[/tab]
[/tabs][/code]

[clear]

Parameters

title: (string) The text to display on the tab.

[clear]
[clear]

Samples

[clear]

[tabs]
[tab title=”First Example Tab”]

Lorem ipsum dolor sit amet

[styled_image w=”200″ h=”140″ lightbox=”yes” image=”4000″ align=”right” alt=”Click me to enlarge!” rel=”tab-1″]

Consectetur adipiscing elit. Nunc posuere aliquet sollicitudin. Proin at pulvinar nibh. Integer euismod ultricies euismod. Nulla ac facilisis arcu. Quisque bibendum suscipit ligula eget placerat. Maecenas volutpat urna eu dui vulputate laoreet. Sed tempus eros quis metus scelerisque ac vestibulum tortor pulvinar. Aliquam sed nisl ut nisi gravida consequat at in metus. Nunc vel erat et mauris malesuada tristique. Quisque mattis elit eros, non facilisis sem. Cras a congue neque. In massa purus, ornare in sagittis id, accumsan ac nisl.

[clear]

[styled_image w=”250″ h=”300″ lightbox=”yes” image=”4003″ align=”left” alt=”Click me to enlarge!” rel=”tab-1″]

Nam libero diam, tincidunt ac volutpat non

Plandit in massa. Sed convallis luctus lorem, quis elementum lacus viverra eu. Aliquam erat turpis, dictum a sodales eu, tempus ac magna. Nam sit amet justo eu lacus commodo rutrum eget a felis. Ut rhoncus faucibus nibh eget scelerisque.

Fusce nec dui turpis sed mollis

Nibh ac blandit porttitor, metus tortor blandit ipsum, eu mattis mi diam ac purus. Integer ornare mattis viverra. Nunc accumsan massa eu ligula pretium id commodo mi aliquet. Nunc gravida purus quis tellus varius consequat. Nullam at diam arcu. Sed urna turpis, pellentesque non venenatis ut, convallis nec velit. Nam placerat imperdiet ornare. Vestibulum faucibus elit sit amet lectus fringilla nec ornare risus faucibus. Sed hendrerit, orci vel varius ornare.

[clear]
[/tab]
[tab title=”Second Example Tab”]

You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don’t know exactly when we turned on each other, but I know that seven of us survived the slide… and only five made it out. Now we took an oath, that I’m breaking now. [pull_quote align=”right”]But then why fifty years from now in the future when the spacecraft encounters the black hole does the computer call that an unknown entry event?

Why don’t they know? If they don’t know, that means we never told anyone.[/pull_quote]We said we’d say it was the snow that killed the other two, it wasn’t. Nature’s lethal but doesn’t hold a candle to man.

You see? It’s curious. Ted did figure it out – time travel. And when we get back, we gonna tell everyone. How it’s possible, how it’s done, what the dangers are. But then why fifty years in the future when the spacecraft encounters a black hole does the computer call it an ‘unknown entry event’? Why don’t they know? If they don’t know, that means we never told anyone. And if we never told anyone it means we never made it back. Hence we die down here. Just as a matter of deductive logic.

Now that we know who you are, I know who I am. I’m not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain’s going to be? He’s the exact opposite of the hero. And most times they’re friends, like you and me! I should’ve known way back when… You know why, David? Because of the kids.

[/tab]
[tab title=”Third Example Tab”]

Sed tempus eros quis metus scelerisque

Maecenas volutpat urna eu dui vulputate laoreet. Sed tempus eros quis metus scelerisque ac vestibulum tortor pulvinar. Nunc vel erat et mauris malesuada tristique. Quisque mattis elit eros, non facilisis sem. Cras a congue neque. In massa purus, ornare in sagittis id, accumsan ac nisl. Sed sit amet nulla ac dolor adipiscing.

[bullet_list icon=”check” indent=”2.5em”]

Consectetur adipiscing elit. Nunc posuere aliquet sollicitudin.
Aliquam sed nisl ut nisi gravida consequat at in metus.
Integer euismod ultricies euismod. Nulla ac facilisis arcu.
Proin at pulvinar nibh. Quisque bibendum suscipit ligula eget placerat.
Aliquam sed nisl ut nisi gravida consequat at in metus.
Integer euismod ultricies euismod. Nulla ac facilisis arcu.
Proin at pulvinar nibh. Quisque bibendum suscipit ligula eget placerat.

[/bullet_list]

Fusce nec dui turpis sed mollis

[/tab]
[/tabs]

[clear]

[hr]

Toggles (FAQs)

Expand and collapse the content inside a container with a title. This is useful for “quick tips” and frequently asked questions pages where the user can navigate a list of questions.

[code][toggle title=”The Question or Title”]The is the answer or content to show…[/toggle][/code]

[clear]

Parameters

title: (string) The title to be displayed.
group: (string) (Optional) A text value to associate with a series of toggles to create an accordion effect. When the same group name is assigned to multiple toggles only one can be open at a time.
start: (string) (Optional) The starting position of the toggle. Values: open, closed (default)
border: (bool) (Optional) Remove the bottom border from a toggle. This is useful when showing only one toggle to display more information about a subject. Values: true (default), false

[clear]
[clear]

Example Toggles

[clear]

Individual Toggles (many open at once)

[toggle title=”Simple Question and Answer Toggle 1″]

The answer or content to show…

Sed urna turpis, pellentesque non venenatis ut, convallis nec velit. Nam placerat imperdiet ornare. Vestibulum faucibus elit sit amet lectus fringilla nec ornare risus faucibus. Sed hendrerit, orci vel varius ornare, sem metus adipiscing diam, quis hendrerit est erat id eros. Mauris ut arcu sapien.

[/toggle]

[toggle title=”Simple Question and Answer Toggle 2″]
[styled_image w=”200″ h=”140″ lightbox=”yes” image=”4003″ align=”right” alt=”Click me to enlarge!” rel=”toggle-2″]

[clear]

[styled_image w=”250″ h=”300″ lightbox=”yes” image=”4000″ align=”left” alt=”Click me to enlarge!” rel=”toggle-2″]

Nam libero diam, tincidunt ac volutpat non

Fusce nec dui turpis sed mollis

[clear]
[/toggle]

[toggle title=”Simple Question and Answer Toggle 3″]

The answer or content to show…

[/toggle]

[toggle title=”Simple Question and Answer Toggle 4″]

The answer or content to show…

[/toggle]

[clear]

[code][toggle title=”The Question or Title”]
<h5>The answer headline</h5>
<p>Some content or a more detailed description of the answer…</p>
[/toggle]
[toggle title=”The Question or Title”]
<h5>The answer headline</h5>
<p>Some content or a more detailed description of the answer…</p>
[/toggle]
[toggle title=”The Question or Title”]
<h5>The answer headline</h5>
<p>Some content or a more detailed description of the answer…</p>
[/toggle][/code]

Accordion Toggles (assigns group parameter, only one open at a time)

[toggle title=”Accordion Style Toggle 1″ group=”accordion-sample” start=”open”]

The answer or content to show…

In this format only one toggle can be open at a time. Clicking another toggle will close the currently open item and open the one clicked. This requires adding the group parameter with an assigned group name and can also be used with the start parameter to assign the initially opened toggle.

[styled_image w=”200″ h=”140″ lightbox=”yes” image=”4003″ align=”right” alt=”Click me to enlarge!” rel=”toggle-2″]

[/toggle]

[toggle title=”Accordion Style Toggle 2″ group=”accordion-sample”]
[styled_image w=”250″ h=”300″ lightbox=”yes” image=”4000″ align=”left” alt=”Click me to enlarge!” rel=”toggle-2″]

Nam libero diam, tincidunt ac volutpat non

Fusce nec dui turpis sed mollis

[/toggle]

[toggle title=”Accordion Style Toggle 3″ group=”accordion-sample”]

The answer or content to show…

[/toggle]

[toggle title=”Accordion Style Toggle 4″ group=”accordion-sample”]

The answer or content to show…

[/toggle]

[toggle title=”Accordion Style Toggle 5″ group=”accordion-sample”]

The answer or content to show…

[/toggle]

[clear]

[code][toggle title=”The Question or Title” group=”sample” start=”open”]
<h5>The answer headline</h5>
<p>Some content or a more detailed description of the answer…</p>
[/toggle]
[toggle title=”The Question or Title” group=”sample”]
<h5>The answer headline</h5>
<p>Some content or a more detailed description of the answer…</p>
[/toggle]
[toggle title=”The Question or Title” group=”sample”]
<h5>The answer headline</h5>
<p>Some content or a more detailed description of the answer…</p>
[/toggle][/code]

[clear]