Bootstrap tab toggle feature

I'm currently facing an issue with Bootstrap's tab component. I need help figuring out how to hide a lorem ipsum section and show a hidden div when a specific tab is clicked, and then revert the changes when a different tab is selected.

$(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>Clicking on this tab should hide the Lorem Ipsum and display 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">
        <!-- Clicking on the third tab hides the Lorem Ipsum and shows this div, selecting another tab hides this again and displays 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/

Thank you for your assistance!

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Make sure your Javascript code matches the following:

$('.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>When this tab is clicked, lorem ipsum will be hidden and content will be shown.</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">
        <!-- Upon clicking the third tab, hide lorem ipsum and display this div. If another tab is selected, hide this div 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>

Answer №2

To achieve this functionality, you can utilize 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 method to toggle back to other tabs should be implemented in a similar manner.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the reason behind the content of a div tag not hiding while the content of a p tag does

<html> <head> <title>How to make a div content disappear when clicked?</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <scrip ...

javascriptjqueryhtml

What could be causing the readTextFile function to return undefined?

var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; function readFile(file) { let fileContents = new XMLHttpRequest(); fileContents.open("GET", file, false); fileContents.onreadystatechange = function () { ...

javascriptnode.jsxmlhttprequesttxt

Every time I employ window.location, the Iframe becomes nested

I am experiencing an issue with my HTML structure: <html> <body> This is the container of the iframe <iframe src="/foo.html"> </iframe> </body> </html> (/foo.html) <html> <script type="text/javascript"> $( ...

phpjavascriptjqueryhtmliframe

Concealing a block from top to bottom

I currently have a filter that is hidden when clicked, with a transition effect that moves it from the bottom to the top. I have recorded my screen to demonstrate this behavior: . However, I now need the filter to hide from top to bottom instead, essenti ...

javascriptcssreactjsanimation

What could be causing selenium to struggle in locating specific text on a webpage

In my webpage, I have a "tree menu" that can be opened by clicking on a button. Once the tree menu is open, I need to follow certain steps and click on different titles. For example, I would click on "19,20", then "may", and finally "2". At the top of the ...

pythonhtmlseleniumtestingxpath

"I'm receiving the error message 'Unable to authenticate user' when attempting to connect to Supabase through the NextJS tutorial. What could be the

Recently, I embarked on a new project using NextJS and Supabase by following the tutorial available at this link. After completing the initial setup by updating the ".env.example" file to ".env.local" with the Supabase credentials, including creating a ne ...

javascriptreactjspostgresqlnext.jssupabase

What is the best way to transfer the content from a tinyMCE textarea editor to an inner controller using Symfony3 and Ajax

I have two small rich text editors identified as #homepage and #thankyoupage. My goal is to submit the content of these TinyMCE text areas to a Symfony controller. Below is my front-end implementation: https://i.stack.imgur.com/TE1Ys.jpg Currently, I am ...

javascriptjqueryajaxsymfonytinymce

Having trouble retrieving image files from CSS within a Spring MVC Application

I am facing an issue with my Spring MVC application where I cannot get an image to display in a CSS file accessed from a JSP file. The CSS is working fine, but the image just won't show up. It seems like there might be an issue with how I am addressin ...

cssspringimagejspaddressing

Save the contents of a file within an HTML table using jQuery

I needed to insert multiple files into the database by uploading and adding each file's content to a table. Once all files were added to the table, I included the table's values along with the file content in form data which was then passed to aj ...

javascriptphpjqueryajaxblob

"Here's a neat trick for assigning the value of a div to a text box without any identifiers like id or

I needed a way to transfer the value of a .item div into an empty textbox without any specific identifier. Then, when the input loses focus, the value should be sent back to the original .item div. $(document).on("click", ".item", function() { $(this) ...

javascriptjquery

What is the reason for the improper setting of the div position?

Welcome to the interactive Pointer Pin application! The red-bordered box is where you can drop your Pointer Pins. This area has a background image set. The blue-bordered box is where you can drag various Pointer Pins from. These pins can be dropped into ...

jqueryhtmljquery-uicss

Utilizing React JS: Displaying or Concealing Specific Components Based on the URL Path

Is there a way to dynamically change the navbar items based on the URL without having separate navbar components for each side? My current navbar design features 3 links on the left side and 3 links on the right, but I want to display only one side at a ti ...

javascripthtmlcssreactjsrouter

What is the best approach for retrieving values from dynamically repeated forms within a FormGroup using Typescript?

Hello and thank you for taking the time to read my question! I am currently working on an Ionic 3 app project. One of the features in this app involves a page that can have up to 200 identical forms, each containing an input field. You can see an example ...

javascriptformstypescriptionic2

What steps do I need to take to modify the MUI Badge component and insert custom text inside?

Is there a way to replace the number with a label next to a new row added to my table using MUI Badge? For example, instead of displaying a number like 4, I want it to show the word "New" as shown in this image: enter image description here This is the co ...

javascriptreactjsmaterial-ui

Conflicting TypeScript enum types: numbers and numbers in NestJS/ExpressJS

Incorporating types into my NestJS server has been a priority. After creating a controller (a route for those who prefer Express), I attempted to define the type for params: public async getAllMessages( @Query('startDate', ValidateDate) start ...

javascriptnode.jstypescriptexpressnext.js

Creating a currency input field in HTML using a pattern textbox

In a project using HTML, Angular 2, and Typescript, I am working with a textbox. How can I ensure that it only accepts numbers along with either one dot or one comma? The input should allow for an infinite number of digits followed by a dot or a comma and ...

htmlangularjsdesign-patternstypescriptcurrency

What causes the Material-UI Grid element to shift upon clicking it?

I have encountered an issue while developing a React app with Material UI. The problem arises on a specific page of the application. This particular page consists of text and a button aligned vertically, along with a second set of text and another button ...

cssreactjsflexboxmaterial-uigrid-layout

Managing Page Refresh using AngularJS Service and Views

In my single-page application (SPA), I have implemented two views: a list view and a detail view. To pass data between these two controllers, I am utilizing a service called StateService. The issue arises when the user refreshes the browser page, causing ...

javascriptangularjs

Animating images with Jquery

As a beginner in Javascript and Jquery, I am currently learning about image animation. However, I have encountered a question regarding moving an image from bottom left to top right within the window. Is there a more efficient way to achieve this compared ...

javascripthtmljquery

javascript date.js parsing and sorting an array of objects

I'm currently working on creating a JavaScript array of objects, utilizing date.js to parse dates, and then sorting that array using date.js compare methods. Below is a snippet of code that highlights the two issues I am facing. Issue 1: How can I ha ...

javascriptjsonparsingdatedatejs