Western Kentucky University

OU Campus - Self-Help

Tabs Snippet

JQuery Tabs can be created with a table transformation.  When you are adding the Tabs Snippet on your page within the WYSIWYG, you will only see a table.  Just fill in the table and it will "transform" to the FAQ list when you publish.  You can also see what it will look like when you publish it in the preview mode. 

You can see an example of the FAQ Snippet on our Funny Monkeys Example site.

If you would like to add a snippet to your page there are a couple of ways to do so.

Alternatively, any two column table into an accordion by adding the following class in the table tag: class="wysinwyg-tabs". 

When you first put the Tabs Snippet in the WYSIWYG Editor you will see the following:

Tab #1 Content for Tab #1
Tab #2 Content #2
Tab #3 Content #3
Tab #4 Content #4

There are no special settings for this snippet.  Everything you add in the table will display when you publish the page.  The content you would like in the tab should be put in the first column, and the body of each tab should be put in the second column.


 Last Modified 5/17/14