I've run into an issue using Bootstrap's tab ponent. I'm trying to figure out how to, on click of a specific tab, hide a lorem ipsum section and show a hidden div and then, on click/selection of a different tab, hide the hidden div again and show the lorem ipsum section again.

$(function(){
    
     $('.nav-tabs a').on('click', function (e) {
        e.preventDefault();
        $(this).tab('show');
    });  
     
});

<link href=".3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href=".3.4/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills">
    <li class="active"><a href="#one" data-toggle="tab">One</a></li>
    <li><a href="#two" data-toggle="tab">Two</a></li>		  
    <li><a href="#three" data-toggle="tab">Three</a></li>	
</ul>

<div class="tab-content clearfix">
    <div class="tab-pane active" id="one">					          
        <p>One</p>
    </div>
    <div class="tab-pane" id="two">		        		        
        <p>Two</p>
    </div>	        			
    <div class="tab-pane" id="three">		        		        
        <p>On click of this tab hide lorem ipsum and show content</p>
    </div>	        			
</div>

<div class="col-md-12">    
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas auctor placerat ex a posuere. Integer feugiat, orci ac vestibulum rhoncus, arcu tellus volutpat ante, in accumsan diam nisl vitae tellus. In at eros sit amet quam luctus auctor. Donec a gravida nisl, nec aliquam lectus. Sed mattis bibendum elementum. Nullam cursus scelerisque arcu, a eleifend sapien posuere nec. Nunc ut fringilla erat. Aenean egestas felis tortor, vel bibendum ligula elementum nec. Etiam ultricies blandit arcu vel cursus. Vestibulum at felis libero. Nulla nec lectus purus. Aliquam tempor rutrum sagittis.</p>
    </div>
</div>
<div class="col-md-12">    
    <div class="hidden">
        <!-- On click of the third tab hide lorem ipsum and show this div & if another tab is selected hide this again and show lorem ipsum -->    
        <p>Content</p>
    </div>
</div>
<script src=".1.0/jquery.min.js"></script>
<script src=".3.5/js/bootstrap.min.js"></script>

I've run into an issue using Bootstrap's tab ponent. I'm trying to figure out how to, on click of a specific tab, hide a lorem ipsum section and show a hidden div and then, on click/selection of a different tab, hide the hidden div again and show the lorem ipsum section again.

$(function(){
    
     $('.nav-tabs a').on('click', function (e) {
        e.preventDefault();
        $(this).tab('show');
    });  
     
});

<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills">
    <li class="active"><a href="#one" data-toggle="tab">One</a></li>
    <li><a href="#two" data-toggle="tab">Two</a></li>		  
    <li><a href="#three" data-toggle="tab">Three</a></li>	
</ul>

<div class="tab-content clearfix">
    <div class="tab-pane active" id="one">					          
        <p>One</p>
    </div>
    <div class="tab-pane" id="two">		        		        
        <p>Two</p>
    </div>	        			
    <div class="tab-pane" id="three">		        		        
        <p>On click of this tab hide lorem ipsum and show content</p>
    </div>	        			
</div>

<div class="col-md-12">    
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas auctor placerat ex a posuere. Integer feugiat, orci ac vestibulum rhoncus, arcu tellus volutpat ante, in accumsan diam nisl vitae tellus. In at eros sit amet quam luctus auctor. Donec a gravida nisl, nec aliquam lectus. Sed mattis bibendum elementum. Nullam cursus scelerisque arcu, a eleifend sapien posuere nec. Nunc ut fringilla erat. Aenean egestas felis tortor, vel bibendum ligula elementum nec. Etiam ultricies blandit arcu vel cursus. Vestibulum at felis libero. Nulla nec lectus purus. Aliquam tempor rutrum sagittis.</p>
    </div>
</div>
<div class="col-md-12">    
    <div class="hidden">
        <!-- On click of the third tab hide lorem ipsum and show this div & if another tab is selected hide this again and show lorem ipsum -->    
        <p>Content</p>
    </div>
</div>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script>

Here is a JSFiddle http://jsfiddle/zacnespral21/fkv5tvaz/

Thanks in advance

• javascript
• jquery
• html
• css
• twitter-bootstrap

• Try looking in this getbootstrap./javascript/#tabs if you have not already. Couldn't understand your question properly? Do you mean you want to change hidden property of div or what? – Luzan Baral Commented Sep 6, 2015 at 2:54

2 Answers 2

Your js code should look like this:

$('.nav-pills a').on('click', function (e) {
    e.preventDefault();

    if($(this).attr('href')=='#three'){
        $('#lorem-text').hide();
        $('#hidden-text div').removeClass('hidden')
    }
    else{
        $('#lorem-text').show();
        $('#hidden-text div').addClass('hidden')
    }
    $(this).tab('show');
}); 

$(function(){
    
     $('.nav-tabs a').on('click', function (e) {
        e.preventDefault();

        if($(this).attr('href')=='#three'){
            $('#lorem-text').hide();
            $('#hidden-text div').show()
        }
        else{
        	$('#lorem-text').show();
            $('#hidden-text div').hide()
        }
        $(this).tab('show');
    });  
     
});

<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills">
    <li class="active"><a href="#one" data-toggle="tab">One</a></li>
    <li><a href="#two" data-toggle="tab">Two</a></li>		  
    <li><a href="#three" data-toggle="tab">Three</a></li>	
</ul>

<div class="tab-content clearfix">
    <div class="tab-pane active" id="one">					          
        <p>One</p>
    </div>
    <div class="tab-pane" id="two">		        		        
        <p>Two</p>
    </div>	        			
    <div class="tab-pane" id="three">		        		        
        <p>On click of this tab hide lorem ipsum and show content</p>
    </div>	        			
</div>

<div class="col-md-12" id="lorem-text">    
    <div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas auctor placerat ex a posuere. Integer feugiat, orci ac vestibulum rhoncus, arcu tellus volutpat ante, in accumsan diam nisl vitae tellus. In at eros sit amet quam luctus auctor. Donec a gravida nisl, nec aliquam lectus. Sed mattis bibendum elementum. Nullam cursus scelerisque arcu, a eleifend sapien posuere nec. Nunc ut fringilla erat. Aenean egestas felis tortor, vel bibendum ligula elementum nec. Etiam ultricies blandit arcu vel cursus. Vestibulum at felis libero. Nulla nec lectus purus. Aliquam tempor rutrum sagittis.</p>
    </div>
</div>
<div class="col-md-12" id="hidden-text">    
    <div class="hidden">
        <!-- On click of the third tab hide lorem ipsum and show this div & if another tab is selected hide this again and show lorem ipsum -->    
        <p>Content</p>
    </div>
</div>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script>

You should be able to do this using events

$(function(){
    
     $('.nav-tabs a').on('click', function (e) {
        e.preventDefault();
        $(this).tab('show');
    });

    //Added a class for the tab control, but there's a better name
    $('.tab-control-three').on('shown.bs.tab', function (e) {

        //Change this class from bootstrap's 'hidden' 
        //to something that doesn't force display:none
        $('.hidden-text').show();

        //You'll need to add a class for this, 
        //but please name it something better :P
        $('.lorem-ipsum').hide();

    })  
     
});

<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn./bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-pills">
    <li class="active"><a href="#one" data-toggle="tab">One</a></li>
    <li><a href="#two" data-toggle="tab">Two</a></li>		  
    <li><a class="tab-control-three" href="#three" data-toggle="tab">Three</a></li>	
</ul>

<div class="tab-content clearfix">
    <div class="tab-pane active" id="one">					          
        <p>One</p>
    </div>
    <div class="tab-pane" id="two">		        		        
        <p>Two</p>
    </div>	        			
    <div class="tab-pane" id="three">		        		        
        <p>On click of this tab hide lorem ipsum and show content</p>
    </div>	        			
</div>

<div class="col-md-12">    
    <div>
        <p class="lorem-ipsum">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas auctor placerat ex a posuere. Integer feugiat, orci ac vestibulum rhoncus, arcu tellus volutpat ante, in accumsan diam nisl vitae tellus. In at eros sit amet quam luctus auctor. Donec a gravida nisl, nec aliquam lectus. Sed mattis bibendum elementum. Nullam cursus scelerisque arcu, a eleifend sapien posuere nec. Nunc ut fringilla erat. Aenean egestas felis tortor, vel bibendum ligula elementum nec. Etiam ultricies blandit arcu vel cursus. Vestibulum at felis libero. Nulla nec lectus purus. Aliquam tempor rutrum sagittis.</p>
    </div>
</div>
<div class="col-md-12">    
    <div class="hidden-text">
        <!-- On click of the third tab hide lorem ipsum and show this div & if another tab is selected hide this again and show lorem ipsum -->    
        <p>Content</p>
    </div>
</div>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn./bootstrap/3.3.5/js/bootstrap.min.js"></script>

The toggle back for other tabs should be similar.