shopify - JQuery Tabs, putting my divs into display:none -

i have implemented tabs site use product description.

its working, text on each tab disappears after 2 secs, after count adding display:none style div.

it picks first 5 div info source in shopify last div picked place.

also first div gets filled information each div until click tab @ top shows appropriate info.

this code:

<script>  $(function() {                                   // <== shorter form of doc ready $('#tabs > div').hide(); $('#tabs div:first').fadein('slow'); $('#tabs ul li:first').addclass('active'); $('#tabs ul li a').click(function(){     $('#tabs ul li.active').removeclass('active');  // <== need     $(this).parent().addclass('active');     var selectedtab=$(this).attr('href');     $('#tabs > div').fadeout('slow', function() {       // <== use callback         $(selectedtab).delay(500).fadein('slow');          // <== add delay     });             return false; });   });     </script>    <div id="tabs">    <ul class="tabs">      <li><a class="active" href="#tab-1">why love it</a></li>      <li><a href="#tab-2">made with</a></li>      <li><a href="#tab-3">how use</a></li>      <li><a href="#tab-4">characteristics</a></li>      <li><a href="#tab-5">meet brand</a></li>      <li><a href="#tab-6">recipes</a></li>    </ul>   <div class="tabcontainer">   <div class="description" itemprop="description">     {{ product.description }}   <div id="tab-5">   {% if product.vendor == 'loving earth' %}   {% include 'lovingearth' %}   {% endif %}       </div>     </div>  </div> </div> 

many in advance.

change this:

$('#tabs > div').fadeout('slow', function() {       // <== use callback     $(selectedtab).delay(500).fadein('slow');          // <== add delay });         return false; 

to this:

 $('.tabcontainer div').fadeout('slow', function() {       // <== use callback     $(selectedtab).delay(500).fadein('slow');          // <== add delay });         return false; 

since $('#tabs > div') selecting every element inside <div id="tabs"> of them being hidden—including tabcontainer. since tabcontainer parent of divs you're trying fadein() : $(selectedtab).delay(500).fadein('slow'), there no result it's still sitting inside of hidden parent.

also, <li><a class="selected">... set in markup class on <a> in script, you're adding class <li> : $('#tabs ul li:first').addclass('active'). unrelated, worthing point out.

an example plunk: http://plnkr.co/edit/qg4xqnhompufkddlgdb7?p=preview changes outline above.