Tag Archive for: Invision

I have been searching to utilize the vertical tabs of IP.Content in a way that avoids page loads.

I wanted to add vertical tabs in a page called home.html. The main logic here is to load all content in divs and allow jQuery to handle the .hide() .show() methods in click events of the tab titles.

HOME.HTML source:

?>
<div class='ipsBox'>
<div class='ipsLayout ipsLayout_withleft ipsLayout_smallleft ipsVerticalTabbed'>
    <div class='ipsLayout_left ipsVerticalTabbed_tabs'>
	{parse block="home_tabs"}
    </div>
	{parse block="home-tab-content-home"} 
	{parse block="home-tab-content-why"}
	{parse block="home-tab-content-who"}  
	{parse block="home-tab-content-privacy"}  
  </div>
  <br class='clear' />
  </div>
  <script>
  	_ccsjQ(document).ready(function(){
  		_ccsjQ('.afz-tab-content').hide();
  		_ccsjQ('#afz-home-tab-content-home').show();
  		_ccsjQ('#afz-tab-title-home').addClass('active');
  	});

	_ccsjQ('#afz-tab-title-home').click(function(){
		doTabActive('#afz-home-tab-content-home',this);
	});
	_ccsjQ('#afz-tab-title-who').click(function(){
		doTabActive('#afz-home-tab-content-who',this);
	});
	_ccsjQ('#afz-tab-title-why').click(function(){
		doTabActive('#afz-home-tab-content-why',this);
	});
	_ccsjQ('#afz-tab-title-privacy').click(function(){
		doTabActive('#afz-home-tab-content-privacy',this);
	});

  	function doTabActive($tab,$tabtitle) {
  		_ccsjQ('.afz-tab-content').hide();
  		_ccsjQ($tab).show();
  		_ccsjQ('.afz-tab-title').removeClass('active');
  		_ccsjQ($tabtitle).addClass('active');
  	}

  </script>

A block was created to hold the titles for the tabs on the left sidebar:

<ul>
        <li id="afz-tab-title-home" class ="afz-tab-title">
          <a href="#">Welcome</a>
        </li>
        <li id='afz-tab-title-who' class ="afz-tab-title">
          <a href="#">Who are we</a>
        </li>
        <li id='afz-tab-title-why' class ="afz-tab-title">
          <a href="#">Why</a>
        </li>
        <li id='afz-tab-title-privacy' class ="afz-tab-title">
          <a href="#">Privacy</a>
        </li>
</ul>

I then created one block for each tab content:

<div id='afz-home-tab-content-home' class='afz-tab-content ipsLayout_content ipsVerticalTabbed_content ipsBox_container'>
        <div class='ipsPad'>
          <h1 class='ipsType_pagetitle'>Welcome!</h1><br/>
               TAB CONTENT HERE!!!
        </div>
    </div>