Jump to content
Search In
  • More options...
Find results that contain...
Find results in...

How to add tabs to a template


Jimi Wikman
 Share

Recommended Posts

  • Owner

As I keep forgetting this one I figure it would be good to add it here 🙂

<div class="ipsTabs ipsTabs_contained ipsTabs_withIcons ipsTabs_large ipsTabs_stretch ipsClearfix" id="elTabBar" data-ipstabbar="" data-ipstabbar-defaulttab="1" data-ipstabbar-contentarea="#" data-ipstabbar-updateurl="false">
	<a href="" data-action="expandTabs"><i class="fa fa-caret-down"></i></a>
    <ul role="tablist">
        <li>
            <a href="" role="tab" id="1" class="ipsType_center ipsTabs_item ipsTabs_activeItem" aria-selected="true">
                <i class="fa fa-list"></i> Tab 1
            </a>
        </li>
        <li>
            <a href="" role="tab" id="2" class="ipsType_center ipsTabs_item">
                <i class="fa fa-star"></i> Tab 2
            </a>
        </li>
        <li>
            <a href="" role="tab" id="3" class="ipsType_center ipsTabs_item">
                <i class="fa fa-terminal"></i>Tab 3
            </a>
        </li>
    </ul>
</div>

<section class="ipsTabs_panels ipsTabs_contained">
    <div id="ipsTabs_elTabBar_1_panel" class='ipsTabs_panel'>
    	Message 1
    </div>
    <div id="ipsTabs_elTabBar_2_panel" class='ipsTabs_panel'>
    	Message 2
    </div>
    <div id="ipsTabs_elTabBar_3_panel" class='ipsTabs_panel'>
    	Message 3
    </div>
</section>

 

Link to comment
Share on other sites

  • 2 weeks later...
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share


×
×
  • Create New...