Sometimes content gets boring for reading because it’s not presented properly presented to site visitors. It looks like there’s missing something. And sometimes we just need to shrink it up in order to avoid a couple of screens of scrolling.
This theme has a support for both toggled and tabbed content!
…and I am about to expand or shrink this text and thus preserve some precious space on this page! Like for example the boring Lorem Ipsum…
Lorem Ipsum
Duis ut nulla eros, sed lacinia ante. Mauris mauris ante, tincidunt in commodo at, suscipit nec ligula. Sed tortor magna, ultricies at lobortis non, condimentum ac turpis. Suspendisse hendrerit semper gravida. Etiam fringilla consequat tristique. Morbi iaculis imperdiet gravida. In sagittis nibh et magna blandit viverra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas a libero velit, vitae tincidunt lacus. Sed elementum tempus feugiat. In hac habitasse platea dictumst. Duis nisi tortor, pharetra sit amet fermentum ac, placerat iaculis neque.
And now the Tabber
OK, let’s now see how things work with the tabbed content. Once again; all of the following can be achieved by using Tabber shortcode!
My first tab
Titles must be H2 or below with Tabber! This is H5…
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempor vehicula sem nec congue. Nulla sit amet orci sit amet urna pharetra mollis at facilisis risus. Curabitur tempus, risus eu volutpat molestie, mauris quam faucibus felis, porttitor pretium sapien tortor eget velit. Aliquam erat volutpat. Phasellus placerat porta tellus et pellentesque. Phasellus at fermentum nisl. Fusce volutpat leo et justo dapibus sed rutrum ante sagittis. Proin aliquet diam in tortor sodales aliquam. Nulla congue molestie lacus, a feugiat erat consectetur non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec eget turpis ac turpis porttitor faucibus. Nulla hendrerit sodales arcu non interdum.
Second tab
This is H4 title
Suspendisse ut mi vitae nunc tempor aliquet non sit amet lectus. Curabitur eget libero nisl. Nulla eget velit lectus, vel scelerisque tellus. Suspendisse molestie dictum lacus eu cursus. Maecenas condimentum cursus turpis eu molestie.
Integer auctor mattis dictum. Sed tincidunt posuere laoreet. Fusce vulputate lorem sit amet mauris viverra ut hendrerit dui vestibulum. Aliquam vel ipsum et nulla pretium elementum non sit amet nulla. Mauris eget risus at arcu vehicula aliquet. In non pharetra nunc. Sed quis sapien a velit porta pharetra consectetur sed nunc. Aliquam eget eros velit.
Third tab
Tables can also be displayed in Tabber
| Lorem Ipsum | Dolor sit Amet | Vitae Semper Arcu |
|---|---|---|
| Morbi volutpat accumsan nisl | quis sollicitudin est dictum ac | Fusce luctus |
| leo a pulvinar egestas | enim enim gravida diam | sit amet commodo dolor nulla sit amet diam |
| Vestibulum odio quam | Donec tempor magna | tincidunt vel quam |
| Leo a pulvinar egestas lorem | Enim enim gravida diam | Sit amet commodo dolor |
How to format text that will be converted to tabbed content?
As already mentioned, all of H1 tags are converted to clickable tabs. Text after each H1 (title) is considered as tab content. Have a look at this trivial example:
<h1>First tab</h1>
My text with images, more shortcodes, etc.
<h1>Second tab</h1>
Some other chunk of text with table
<h1>Third tab</h1>
My third tab content
So, how to actually turn that into tabbed content? Shortcode button is already present in WordPress WYSIWYG editor (tinyMCE), simply select entire chunk of text then hit shortcode button. Publish your page or post (or update) and that’s all. At the end, it’ll look like this in text editor:
[tabber]
<h1>First tab</h1>
My text with images, more shortcodes, etc.
<h1>Second tab</h1>
Some other chunk of text with table
<h1>Third tab</h1>
My third tab content
[/tabber]
