Tab Group shortcode: Different Styles & Behavior
Xtreme has a Tab Group Shortcode to create tabbed content. It has a few styling options, but here are some more for a completely different look and behavior.
First make sure you read the User Guide article on this shortcode
The rules below will change the regular Tab look to Button style
It will also allow you to start will all tabs content closed, and open/close them as you click the buttons.
Styling the various components
/*-Styling the content area (border and space at the top)*/ .wvr-tabs-style#wvr-tab-group-1 .wvr-tabs-pane { border:2px solid lightblue !important; background:azure; border-radius:10px; margin-top:10px; } /*-Styling the tabs for a Button style (border height and space)*/ .wvr-tabs-style#wvr-tab-group-1 .wvr-tabs-nav span { border:2px solid grey; border-radius:5px; height:36px; margin-right:10px; margin-bottom:5px; -moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box; } /*-Different color for current tab border*/ .wvr-tabs-style#wvr-tab-group-1 .wvr-tabs-nav span.wvr-tabs-current { border-color:darkblue; background:azure; } /*-Tabs hover color*/ .wvr-tabs-style#wvr-tab-group-1 .wvr-tabs-nav span:hover { background-color:lightgrey; }
Starting with all tabs closed
Changing the display of the tab when clicking is done with javascript, so you would normally need to use javascript to change that behavior and start with all tab closed.
What you could do without resorting to javascript, is make the first tab empty and style the first button and tab to be hidden, so It will start with nothing opened.
First method hides both first tab and content, so you wont be able close it back once anotherone is opened.
/*-Hide first tab to start closed*/ .wvr-tabs-style#wvr-tab-group-1 .wvr-tabs-nav span:nth-of-type(1), .wvr-tabs-style#wvr-tab-group-1 .wvr-tabs-pane:nth-of-type(1) { display:none !important; }
Second method, to have a way to close it back, you can name the first tab “Close”, and use the rule below instead of the one above to only hide the content of the first tab, but keep the (Close) button.
/*-Hide first tab content, keep a Close button*/ .wvr-tabs-style#wvr-tab-group-1 .wvr-tabs-pane:nth-of-type(1) { display:none !important; }
Notes:
- Adding an Icon to the tabs
You can insert an Icon in the tab title Shortcode by just adding the HTML in it like below
[
tab title=’<
img src=”ImageUrl” style=”margin-right:10px;”/>tab two’]Content for the second tab.[/tab] - If using more than one set of Tab groups, make sure to update the selector #wvr-tab-group-1 with the right number in all the rules.