Clever Geek Handbook

JQuery not working to hide and show div until Bootstrap tab clicked

I have two different divs that should appear depending on which tab is active.

If the "#myTab Class Overview" tab is active, then the "rent div" should appear. If the "class #myTab" is not active, they should show the "homeo div".

My function doesn't work on page load, both divs are loaded on the page. If I click on any tab then only my function works.

You know how to get my function to work with page load.

jQuery(document).ready(function () {
            jQuery('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                if ($("#myTab")[0].className=='overview active')
                    jQuery('#rental').show(), jQuery('#homeo').hide(); 
                else
                    jQuery('#rental').hide(), jQuery('#homeo').show();
                    
            });
        })
      

        
        
        
      

    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rental">
<a href="" target="_blank" class="btn btn-info btn-lg blue" role="button">DOWNLOAD APPLICATION</a>
</div>


<div id="homeo">
<a href="" target="_blank" class="btn btn-info btn-lg blue" role="button">Test</a>
</div>

	
	
  <ul class="nav nav-pills">
    <li id="myTab" class="overview active"><a data-toggle="tab" href="#home">RENTAL</a></li>
    <li><a data-toggle="tab" href="#homeowner">HOMEOWNER</a></li>
  </ul>
Run codeHide result


+3


source to share


4 answers


Why not use a CSS or style attribute to hide the element in the pageload. Let's say you only want to show ads on page load.

<div id="homeo" style="display:none;">
<a href="" target="_blank" class="btn btn-info btn-lg blue" role="button">Test</a>
</div>


Or using CSS

#homeo {
    display: none;
}
+3


source


.className

is native javascript. JQuery objects do not have this property.

Do you want to use $("#myTab")[0].hasClass('overview')



jQuery hasClass documentation

+1


source


You need to call your hide / show code to load the page along with clicking on the tab

jQuery(document).ready(function () {
            if($('#myTab').hasClass('overview active'))
            {
                jQuery('#rental').show(), jQuery('#homeo').hide();
            }else
            {
                jQuery('#rental').hide(), jQuery('#homeo').show();
            }
            jQuery('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                if ($("#myTab")[0].className=='overview active')
                    jQuery('#rental').show(), jQuery('#homeo').hide(); 
                else
                    jQuery('#rental').hide(), jQuery('#homeo').show();

            });
        })
+1


source


Here with a demo

https://jsfiddle.net/jalayoza/cnsLfbza/

jQuery(document).ready(function () {
            if($('#myTab').hasClass('overview active'))
            {
                jQuery('#rental').show(), jQuery('#homeo').hide();
            }else
            {
                jQuery('#rental').hide(), jQuery('#homeo').show();
            }
            jQuery('a[data-toggle="tab"]').on('click', function (e) {
                if ($("#myTab")[0].className=='overview active')
                    jQuery('#rental').show(), jQuery('#homeo').hide(); 
                else
                    jQuery('#rental').hide(), jQuery('#homeo').show();

            });
        }) 



<div id="rental">
<a href="" target="_blank" class="btn btn-info btn-lg blue" role="button">DOWNLOAD APPLICATION</a>
</div>


<div id="homeo">
<a href="" target="_blank" class="btn btn-info btn-lg blue" role="button">Test</a>
</div>



  <ul class="nav nav-pills">
    <li id="myTab" class="overview active"><a data-toggle="tab" href="#home">RENTAL</a></li>
    <li><a data-toggle="tab" href="#homeowner">HOMEOWNER</a></li>
  </ul>
0


source






More articles:


All Articles