2

I am using jQuery - MixItUp portfolio plugin.

How can show default tab content as "Icon Tab" with relevant content instead of "All"

Tab Active is working fine where as content is not changing...

Online Demo

jQuery

$(function () {

  var filterList = {

    init: function () {

      // MixItUp plugin
      // http://mixitup.io
      $('#portfoliolist').mixitup({
        targetSelector: '.portfolio',
        filterSelector: '.filter',
        effects: ['fade'],
        easing: 'snap',
        // call the hover effect
        onMixEnd: filterList.hoverEffect()
      });               

    },

    hoverEffect: function () {

      // Simple parallax effect
      $('#portfoliolist .portfolio').hover(
        function () {
          $(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
          $(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');               
        },
        function () {
          $(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
          $(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');                             
        }       
      );                

    }

  };

  // Run the show!
  filterList.init();


});

HTML

<div class="container">

  <ul id="filters" class="clearfix">
    <li><span class="filter" data-filter="app card icon logo web">All</span></li>
    <li><span class="filter" data-filter="app">App</span></li>
    <li><span class="filter" data-filter="card">Card</span></li>
    <li><span class="filter active" data-filter="icon">Icon</span></li>
    <li><span class="filter" data-filter="logo">Logo</span></li>
    <li><span class="filter" data-filter="web">Web</span></li>
  </ul>

  <div id="portfoliolist">

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">               
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/5.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Bird Document</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>              

    <div class="portfolio app" data-cat="app">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/app/1.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Visual Infography</a>
            <span class="text-category">APP</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>      

    <div class="portfolio web" data-cat="web">
      <div class="portfolio-wrapper">                       
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/web/4.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Sonor's Design</a>
            <span class="text-category">Web design</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>              

    <div class="portfolio card" data-cat="card">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/1.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Typography Company</a>
            <span class="text-category">Business card</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>  

    <div class="portfolio app" data-cat="app">
      <div class="portfolio-wrapper">
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/app/3.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Weatherette</a>
            <span class="text-category">APP</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>          

    <div class="portfolio card" data-cat="card">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/4.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">BMF</a>
            <span class="text-category">Business card</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>  

    <div class="portfolio card" data-cat="card">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/5.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Techlion</a>
            <span class="text-category">Business card</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>  

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/1.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">KittyPic</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                                                                                                                                          

    <div class="portfolio app" data-cat="app">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/app/2.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Graph Plotting</a>
            <span class="text-category">APP</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                                      

    <div class="portfolio card" data-cat="card">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/2.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">QR Quick Response</a>
            <span class="text-category">Business card</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>              

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/6.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Mobi Sock</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                                                  

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/7.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Village Community Church</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                                  

    <div class="portfolio icon" data-cat="icon">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/icon/4.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Domino's Pizza</a>
            <span class="text-category">Icon</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                          

    <div class="portfolio web" data-cat="web">
      <div class="portfolio-wrapper">                       
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/web/3.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Backend Admin</a>
            <span class="text-category">Web design</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                                                                              

    <div class="portfolio icon" data-cat="icon">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/icon/1.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Instagram</a>
            <span class="text-category">Icon</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>              

    <div class="portfolio web" data-cat="web">
      <div class="portfolio-wrapper">                       
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/web/2.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Student Guide</a>
            <span class="text-category">Web design</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                                                  

    <div class="portfolio icon" data-cat="icon">
      <div class="portfolio-wrapper">
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/icon/2.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Scoccer</a>
            <span class="text-category">Icon</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                                                                                                                                                                                                                                              

    <div class="portfolio icon" data-cat="icon">
      <div class="portfolio-wrapper">                       
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/icon/5.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">3D Map</a>
            <span class="text-category">Icon</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>          

    <div class="portfolio web" data-cat="web">
      <div class="portfolio-wrapper">                       
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/web/1.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Note</a>
            <span class="text-category">Web design</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                  

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/3.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Native Designers</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                                                  

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/4.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Bookworm</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                                                                                              

    <div class="portfolio icon" data-cat="icon">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/icon/3.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Sandwich</a>
            <span class="text-category">Icon</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                                                                              

    <div class="portfolio card" data-cat="card">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/3.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Reality</a>
            <span class="text-category">Business card</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>  

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">           
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/2.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Speciallisterne</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>              


  </div>

</div><!-- container -->
Reddy
  • 1,477
  • 29
  • 79

1 Answers1

5

I found the solution, looking at the source code of the mixitup.js you just need to pass object property named showOnLoad which is by default set to all.

Newer version have a differrent property to set,

Here is sample, [for version 1.5.6] (which is your version)

$('#portfoliolist').mixitup({
    showOnLoad : 'icon', // <----- This property
    targetSelector: '.portfolio',
    filterSelector: '.filter',
    effects: ['fade'],
    easing: 'snap',
});

Sample for, [version 2.1.9]

load: {
    filter: 'all',
},

Here is source for v2.1.9 if you want to dig more.

Check out the sample below: icon as default filter

$(function () {

  var filterList = {

    init: function () {

      // MixItUp plugin
      // http://mixitup.io
      $('#portfoliolist').mixitup({

        showOnLoad : 'icon',
        targetSelector: '.portfolio',
        filterSelector: '.filter',
        effects: ['fade'],
        easing: 'snap',
        // call the hover effect
        onMixEnd: filterList.hoverEffect()
      });    

    },

    hoverEffect: function () {

      // Simple parallax effect
      $('#portfoliolist .portfolio').hover(
        function () {
          $(this).find('.label').stop().animate({bottom: 0}, 200, 'easeOutQuad');
          $(this).find('img').stop().animate({top: -30}, 500, 'easeOutQuad');    
        },
        function () {
          $(this).find('.label').stop().animate({bottom: -40}, 200, 'easeInQuad');
          $(this).find('img').stop().animate({top: 0}, 300, 'easeOutQuad');        
        }  
      );    

    }

  };

  // Run the show!
  filterList.init();


});
<link rel="stylesheet" type="text/css" href="http://www.queness.com/resources/html/simple-portfolio-page/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="http://www.queness.com/resources/html/simple-portfolio-page/css/layout.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.queness.com/resources/html/simple-portfolio-page/js/jquery.easing.min.js"></script>
<script src="http://www.queness.com/resources/html/simple-portfolio-page/js/jquery.mixitup.min.js"></script>
<div class="container">

  <ul id="filters" class="clearfix">
    <li><span class="filter" data-filter="app card icon logo web">All</span></li>
    <li><span class="filter" data-filter="app">App</span></li>
    <li><span class="filter" data-filter="card">Card</span></li>
    <li><span class="filter active" data-filter="icon">Icon</span></li>
    <li><span class="filter" data-filter="logo">Logo</span></li>
    <li><span class="filter" data-filter="web">Web</span></li>
  </ul>

  <div id="portfoliolist">

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">    
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/5.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Bird Document</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>    

    <div class="portfolio app" data-cat="app">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/app/1.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Visual Infography</a>
            <span class="text-category">APP</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>  

    <div class="portfolio web" data-cat="web">
      <div class="portfolio-wrapper">      
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/web/4.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Sonor's Design</a>
            <span class="text-category">Web design</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>    

    <div class="portfolio card" data-cat="card">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/1.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Typography Company</a>
            <span class="text-category">Business card</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div> 

    <div class="portfolio app" data-cat="app">
      <div class="portfolio-wrapper">
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/app/3.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Weatherette</a>
            <span class="text-category">APP</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>   

    <div class="portfolio card" data-cat="card">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/4.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">BMF</a>
            <span class="text-category">Business card</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div> 

    <div class="portfolio card" data-cat="card">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/5.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Techlion</a>
            <span class="text-category">Business card</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div> 

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/1.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">KittyPic</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                       

    <div class="portfolio app" data-cat="app">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/app/2.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Graph Plotting</a>
            <span class="text-category">APP</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>              

    <div class="portfolio card" data-cat="card">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/2.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">QR Quick Response</a>
            <span class="text-category">Business card</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>    

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/6.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Mobi Sock</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                 

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/7.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Village Community Church</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>             

    <div class="portfolio icon" data-cat="icon">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/icon/4.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Domino's Pizza</a>
            <span class="text-category">Icon</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>       

    <div class="portfolio web" data-cat="web">
      <div class="portfolio-wrapper">      
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/web/3.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Backend Admin</a>
            <span class="text-category">Web design</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                        

    <div class="portfolio icon" data-cat="icon">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/icon/1.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Instagram</a>
            <span class="text-category">Icon</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>    

    <div class="portfolio web" data-cat="web">
      <div class="portfolio-wrapper">      
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/web/2.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Student Guide</a>
            <span class="text-category">Web design</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                 

    <div class="portfolio icon" data-cat="icon">
      <div class="portfolio-wrapper">
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/icon/2.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Scoccer</a>
            <span class="text-category">Icon</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                                                                

    <div class="portfolio icon" data-cat="icon">
      <div class="portfolio-wrapper">      
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/icon/5.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">3D Map</a>
            <span class="text-category">Icon</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>   

    <div class="portfolio web" data-cat="web">
      <div class="portfolio-wrapper">      
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/web/1.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Note</a>
            <span class="text-category">Web design</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>         

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/3.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Native Designers</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                 

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/4.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Bookworm</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                            

    <div class="portfolio icon" data-cat="icon">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/icon/3.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Sandwich</a>
            <span class="text-category">Icon</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>                        

    <div class="portfolio card" data-cat="card">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/card/3.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Reality</a>
            <span class="text-category">Business card</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div> 

    <div class="portfolio logo" data-cat="logo">
      <div class="portfolio-wrapper">   
        <img src="http://www.queness.com/resources/html/simple-portfolio-page/img/portfolios/logo/2.jpg" alt="" />
        <div class="label">
          <div class="label-text">
            <a class="text-title">Speciallisterne</a>
            <span class="text-category">Logo</span>
          </div>
          <div class="label-bg"></div>
        </div>
      </div>
    </div>    


  </div>

</div><!-- container -->
viral
  • 3,724
  • 1
  • 18
  • 32
  • Hi **@viral** I did not able to see the change as I expected... I want Icon tab(with relevant content) has to be selected default instead All tab – Reddy Aug 19 '15 at 06:33
  • @Reddy check out my edit It should resolve your issue. – viral Aug 19 '15 at 17:47
  • 1
    **@viral**... Excellent work.. **Its working like a CHARM**... Thanks for the perfect solution................ `showOnLoad: 'icon',` has done the trick... Keep up the Great Work... **I am accepting your answer & Voting Up** – Reddy Aug 20 '15 at 04:09