Why not enable toggle on each tab click for a seamless experience?

Question

Why not enable toggle on each tab click for a seamless experience?

When you click on the tabs, the accordion is toggling between hidden and shown states, but not consistently with every click. Check out the fiddle for reference.

<div role="tabpanel" id="tabs-test">
              <!-- Nav tabs -->
              <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#divTab1" aria-controls="" role="tab" data-toggle="tab">Home</a></li>
                <li role="presentation"><a href="#divTab2" aria-controls="" role="tab" data-toggle="tab">Profile</a></li>
                <li role="presentation"><a href="#divTab3" aria-controls="" role="tab" data-toggle="tab">Messages</a></li>
                <li role="presentation"><a href="#divTab4" aria-controls="" role="tab" data-toggle="tab">Settings</a></li>
              </ul>
              <!-- Tab panes -->
              <div class="tab-content-outer">
                  <div class="tab-content">
                    <div role="tabpanel" class="tab-pane active" id="divTab1">It became popular in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
                    <div role="tabpanel" class="tab-pane" id="divTab2">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</div>
                    <div role="tabpanel" class="tab-pane" id="divTab3">The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</div>
                    <div role="tabpanel" class="tab-pane" id="divTab4">The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.</div>
                  </div>
              </div>
            </div>
            <!-- /tabpanel -->

javascript jquery html css twitter-bootstrap-3

Answer 1

Answer №1

By moving the $(this).click(function() { outside of the initial click function and using the jQuery .on method for the active li, you can achieve the desired results:

// Update: Use a different onclick for the active and non-active,
// and ensure .show()
$(".nav-tabs").on('click','li:not(.active)',function() {
    $(NewContent).appendTo($(this));
    $(NewContent).show();
});
$(".nav-tabs").on('click','li.active',function() {
    $(NewContent).toggle();
});

Take a look at the updated working example on Fiddle: https://jsfiddle.net/DTcHh/5875/

Reasons why your code may not be working:

The issue lies in adding a new .click event every time an li is clicked. This leads to toggling between on and off states, especially when the click count is even, resulting in no visible change.

For more clarity, refer to this demonstration on Fiddle and monitor the console: https://jsfiddle.net/DTcHh/5864/

Answer 2

By moving the $(this).click(function() { outside of the initial click function and using the jQuery .on method for the active li, you can achieve the desired results:

// Update: Use a different onclick for the active and non-active,
// and ensure .show()
$(".nav-tabs").on('click','li:not(.active)',function() {
    $(NewContent).appendTo($(this));
    $(NewContent).show();
});
$(".nav-tabs").on('click','li.active',function() {
    $(NewContent).toggle();
});

Take a look at the updated working example on Fiddle: https://jsfiddle.net/DTcHh/5875/

Reasons why your code may not be working:

The issue lies in adding a new .click event every time an li is clicked. This leads to toggling between on and off states, especially when the click count is even, resulting in no visible change.

For more clarity, refer to this demonstration on Fiddle and monitor the console: https://jsfiddle.net/DTcHh/5864/

Why not enable toggle on each tab click for a seamless experience?

Answer №1

Similar questions

The jquery animation feature seems to be malfunctioning as the div element is not displaying

Tips for transferring an object from data attributes to methods within a VueJS component

The image is failing to display in the CSS

Passing Selected Table Row Model Data to Backend in Angular 7

retrieve the chosen option from a dropdown menu within a table

Exploring Nuxt Auth Module: Retrieve a user using their id or username

Automatically choose the initial <select> option when loading asynchronous choices in Vue 3

Steps for repairing a button positioned at the top of a nested container within a form

Transforming an array of Instagram photos into an array specifically consisting of chosen photos

What steps should be taken to ensure that the function triggered by @submit functions properly?

Unable to adjust image opacity using jQuery

Pass the selected ID from a Vue.js select component to an Axios post request and then render another select

Trouble receiving Ajax response

"The utilization of either Threejs ArrowHelper or Line with an outlined design

Page refreshing in Angular 5 consistently redirects to the home page instead of staying on the current page

The error message "THREE is not defined" indicates a problem

Is it possible to send an array value from JavaScript Ajax to PHP and then successfully retrieve and read it?

What causes the odd gaps at the bottom of boxes in a Pure CSS Masonry layout?

JavaScript counter to monitor the number of requests made to the Open Weather Map API

The WCF data service is only returning XML responses and not JSON