Bootstrap show/hide tab component

Question

I've run into an issue using Bootstrap's tab component. 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.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/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.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

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

Thanks in advance

Answer 1

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.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/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.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

The toggle back for other tabs should be similar.

Answer 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.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/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.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>