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

The Heroku system encountered an issue: ENOENT - file or directory not found, trying to access '.env'

I'm encountering issues while attempting to deploy my application to Heroku: Error: ENOENT: no such file or directory, open '.env' 2019-04-10T01:38:23.050188+00:00 app[web.1]: 1 at Object.openSync (fs.js:438:3) 2019-04-10T01:38:23 ...

javascriptnode.jsexpressheroku

Troubleshooting: jQuery's append function does not seem to be functioning properly when trying

I am attempting to include a stylesheet in the head section of my page, but it seems that using 'append' is not getting the job done. Is there an alternative approach I should consider? Here is the code snippet: $('head').append(&apos ...

javascriptjqueryappend

Connecting a controller to a directive in AngularJS: A step-by-step guide

Imagine a scenario with the following HTML structure: <div ng-app="testApp"> <div ng-controller="controller1"> {{controller1}} </div> <div ng-controller="controller2"> {{controller2}} </div> ...

javascriptangularjsangularjs-directive

Encountering the issue of "Unknown provider" while injecting Angular modules

After following a tutorial on organizing an Angular project, I came up with a structure where I have a ng directory containing all my controllers, services, and the routes.js file. These are then bundled together into an app.js through my configuration in ...

javascriptangularjsmodule

Retrieve data from a JSON file

I have a JSON file containing various player data, and I need to extract the "Name" field from it. { "player": [ { "Position": "TEST", "Name": "TEST", "Squad_No": "TEST", "Club": "TEST", "Age": "TEST" }, ...

javascriptarraysjsonnode.jsredips.drag

Utilizing variable values in HTML and CSS to enhance a website's functionality

My current project involves modifying an HTML web resource for use in Dynamics 365. I need to replace a static URL with a dynamic value obtained via Javascript, specifically: var URL = Xrm.Page.context.getClientUrl(); There are multiple instances within ...

javascripthtmlcssmicrosoft-dynamics

Locate a specific data point within an array of JSON objects

After receiving an array of JSON objects from JSP, I now have a set of data that contains book titles. "Titles":[ { "Book3" : "BULLETIN 3" } , { "Book1" : "BULLETIN 1" } , { "Book2" : "B ...

javascriptjson

Arranging DIVs in a vertical layout

Currently, I am working on a design that involves organizing several <DIV> elements in a vertical manner while still maintaining responsiveness. Here are some examples: Wider layout Taller layout I have tried using floats, inline-block display, ...

javascriptjquerycss

What is the syntax for implementing conditional statements within the style jsx of Next.js?

Recently, I've been exploring the use of <style jsx> in my Next.js project and encountered a scenario where I needed to style an element based on a conditional statement. Additionally, my project relies on tailwindCSS for styling: <div classN ...

cssnext.jsstyled-jsx

Customizing File Size and Dimensions in Form Submission with Dropzone.js in JavaScript

I am currently experimenting with some sample code for Dropzone.js and am interested in finding a way to include the file size as a form field when submitting: var KTFormsDropzoneJSDemos = { init: function(e) { new Dropzone("#kt_dropzonejs_exam ...

javascriptdropzone.jsdropzone

Generating an Xpath for the selected element with the help of Javascript or Jquery - here's how!

On my website, I have implemented a click event on an element. When a user clicks on this element, I want to generate the XPath of that particular element starting from either the html or body tag, also known as the Absolute Xpath. For example, if I click ...

javascriptjqueryhtmlxpath

Do frameworks typically result in redundant CSS declarations?

Working on my latest Wordpress theme project, I have integrated the Bootstrap framework. One of the styles included in the Bootstrap CSS file is: input, textarea, .uneditable-input { width: 206px; } This style rule is causing issues with how my search ...

csstwitter-bootstrapframeworks

What is the process for integrating Socket io into an external JavaScript file that is connected to an HTML file?

Currently, I am utilizing node js, socket io, and express to develop a multiplayer web game. To begin, the server initiates and listens on port 2000. Upon visiting localhost:2000, the file lobby.html is transmitted using: //app.js const express = require ...

javascripthtmlnode.jsexpresssocket.io

What is the best way to fill in references that are nested within an array object using mongoose?

How do I go about populating the product fields within the cart array provided below? { "_id": "5bbd1c6e2c48f512fcd733b4", "cart": [ { "count": 1, "_id": "5bbd30ed9417363f345b15fc", "product": "5ba93a6d ...

javascriptnode.jsmongodbexpressmongoose

Prevent iPhone from automatically changing phone numbers to grey text color

For some reason, the iPhone keeps changing the phone numbers on my site to grey, despite using Drupal 7. I've heard that this is because the iPhone wants to make them stand out for users to interact with. I tried adding the following code to the head ...

htmlioscss

I keep encountering a persistent net::ERR_CONNECTION_REFUSED error when attempting to make a POST request to https://localhost:5000/users/add. Despite trying various solutions recommended online, I still cannot

I'm currently developing a workout tracker app using the MERN stack. As part of this project, I have a React JS component that is responsible for adding a new user to the database when the submit button is clicked. To achieve this functionality, I am ...

javascriptnode.jsreactjsmongodbmongoose

One of the paragraphs refuses to align with the others by floating left

Greetings everyone! This is my first time posting here, although I have been a regular visitor looking for answers on this site. Hopefully, someone can assist me with my current issue. Let me explain my problem: I've been attempting to align all the ...

htmlcsscss-float

When it comes to handling media queries, iPhone is geared towards min-width dimensions of 768

The layout of my landing page has a CSS structure that looks like this: body { background: white; } @media (min-width: 768px) { body { background: red; } } @media (max-width: 767px) { body { background: blue; } } Des ...

cssresponsive-designmedia-queries

Is there a way to ensure that both new Date() and new Date("yyyy-mm-dd hh:mm:ss") are initialized with the same timezone?

When utilizing both constructors, I noticed that they generate with different timezones. Ideally, they should be in the same timezone to ensure accurate calculations between them. I attempted to manually parse today's date and time, but this feels li ...

javascriptdate

A guide on accessing objects from an array in Vue.js

Wondering how to choose an object from an array in Vue.js: When the page loads, the selectTitle() function is triggered. I simply want to select a specific object (for example, i=2) from my 'titleList' array. However, at the moment, I am only re ...

javascriptarraysselectvue.jsscope