Post by JANNA on May 8, 2017 16:46:33 GMT
[meow]
Your whole table must be wrapped in [tabbed][/tabbed].
Give your [attr="class","jtabs"]tabsa class of jtabs to put them in this nice little box. If you want something you can style yourself, you can use the class show instead. Your first tab should also have a class of active-appo
to show that its content is the first displayed. if you want your table to start off completely collapsed, you can leave this out.
Next, give your tabs a target each with [attr="target","NAME"]. The name of this target can be anything, as long as it's unique to the tab. For example, if I were setting up a table with three tabs, they would look like this:
[span][attr="class","jtabs active-appo"][attr="target","tab1"]tab one[/span]
[span][attr="class","jtabs"][attr="target","tab2"]tab two[/span]
[span][attr="class","jtabs"][attr="target","tab3"]tab three[/span]
Note that you don't have to use [span] to make your tabs. [div] would work just as well; or even [li] (but that would require more styling on your part.
Give each of your content divs an ID that will correspond with the target tab that will activate them. Prefix all these ids with div. So if the target of your tab is tab1, then your ID should be divtab1. Then, give your div a class of targetDiv. The div of your first tab should also have a class of active-jtab so that it will be the first content to be displayed. If you want your table to start off completely collapsed, you can leave this out.
Your content tabs should look like this:
You can add more classes to these to style them individually. However, I recommend either another wrap around the whole thing to style it or using newclass to style the span-tab class, which will style the div generated by [tabbed]. Because I'm lazy, I'm just going to use [meow] to style this example table. When you're done, your code should look something like this:
[tabbed]
[meow]
[span][attr="class","jtabs active-appo"][attr="target","tab1"]tab one[/span]
[span][attr="class","jtabs"][attr="target","tab2"]tab two[/span]
[span][attr="class","jtabs"][attr="target","tab3"]tab three[/span]
[/meow]
[/tabbed]
[/meow]
[tabbed][meow][attr="class","jtabs active-appo"][attr="target","tab1"]tab one[attr="class","jtabs"][attr="target","tab2"]tab two[attr="class","jtabs"][attr="target","tab3"]tab three
[newclass=.meow h1]font-size: 20px;[/newclass]
step one: wrap it
Your whole table must be wrapped in [tabbed][/tabbed].
step two: setting up tabs
Give your [attr="class","jtabs"]tabsa class of jtabs to put them in this nice little box. If you want something you can style yourself, you can use the class show instead. Your first tab should also have a class of active-appo
to show that its content is the first displayed. if you want your table to start off completely collapsed, you can leave this out.
Next, give your tabs a target each with [attr="target","NAME"]. The name of this target can be anything, as long as it's unique to the tab. For example, if I were setting up a table with three tabs, they would look like this:
[span][attr="class","jtabs active-appo"][attr="target","tab1"]tab one[/span]
[span][attr="class","jtabs"][attr="target","tab2"]tab two[/span]
[span][attr="class","jtabs"][attr="target","tab3"]tab three[/span]
Note that you don't have to use [span] to make your tabs. [div] would work just as well; or even [li] (but that would require more styling on your part.
step three: setting up content
Give each of your content divs an ID that will correspond with the target tab that will activate them. Prefix all these ids with div. So if the target of your tab is tab1, then your ID should be divtab1. Then, give your div a class of targetDiv. The div of your first tab should also have a class of active-jtab so that it will be the first content to be displayed. If you want your table to start off completely collapsed, you can leave this out.
Your content tabs should look like this:
[div][attr="id","divtab1"][attr="class","targetDiv active-jtab"]tab one content[/div]
[div][attr="id","divtab2"][attr="class","targetDiv"]tab two content[/div]
[div][attr="id","divtab3"][attr="class","targetDiv"]tab three content[/div]
[div][attr="id","divtab2"][attr="class","targetDiv"]tab two content[/div]
[div][attr="id","divtab3"][attr="class","targetDiv"]tab three content[/div]
step four: styling your tabbed content
You can add more classes to these to style them individually. However, I recommend either another wrap around the whole thing to style it or using newclass to style the span-tab class, which will style the div generated by [tabbed]. Because I'm lazy, I'm just going to use [meow] to style this example table. When you're done, your code should look something like this:
[tabbed]
[meow]
[span][attr="class","jtabs active-appo"][attr="target","tab1"]tab one[/span]
[span][attr="class","jtabs"][attr="target","tab2"]tab two[/span]
[span][attr="class","jtabs"][attr="target","tab3"]tab three[/span]
[div][attr="id","divtab1"][attr="class","targetDiv active-jtab"]tab one content[/div]
[div][attr="id","divtab2"][attr="class","targetDiv"]tab two content[/div]
[div][attr="id","divtab3"][attr="class","targetDiv"]tab three content[/div]
[div][attr="id","divtab2"][attr="class","targetDiv"]tab two content[/div]
[div][attr="id","divtab3"][attr="class","targetDiv"]tab three content[/div]
[/meow]
[/tabbed]
[/meow]
[tabbed][meow][attr="class","jtabs active-appo"][attr="target","tab1"]tab one[attr="class","jtabs"][attr="target","tab2"]tab two[attr="class","jtabs"][attr="target","tab3"]tab three
[attr="id","divtab1"][attr="class","targetDiv active-jtab"]tab one content
[attr="id","divtab2"][attr="class","targetDiv"]tab two content
[attr="id","divtab3"][attr="class","targetDiv"]tab three content
[/meow][/tabbed][newclass=.meow h1]font-size: 20px;[/newclass]