The tab content appears to be hidden or not displaying properly

I'm currently working on a project involving tabs that display content for two different data-targets (which is not an issue). I've implemented a script that automatically switches tabs every 5 seconds. The tab changes successfully, but the tab-content doesn't appear as expected. I'm unsure why this is happening and would greatly appreciate any assistance. Thank you.

Codepen Demo Here

$(document).ready(function () {
            var timeInterval, currnetIndex = 1;
            tabCount = 5;
            var tabContentObj = $('.tab-content');
            changeTabIndex();
            timeInterval = setInterval(function () { changeTabIndex(); }, 4 * 1000);

            function changeTabIndex() {
                if (currnetIndex > tabCount) {
                    currnetIndex = 1;
                }
                tabContentObj.hide();
                $('ul#myTab').find('li.active').removeClass('active');
                var currentAncorObj = $('ul#myTab').find('li a').eq(currnetIndex - 1);
                currentAncorObj.parent().addClass('active');
                $(currentAncorObj.attr('href')).show();
                currnetIndex++;

            };

            $('#myTab li').mouseenter(function () {
                clearInterval(timeInterval);
            }).mouseleave(function () {
                timeInterval = setInterval(function () { changeTabIndex(); }, 4 * 1000);
            });

            $('#myTab li a').click(function () {
                tabContentObj.hide();
                $('ul#myTab').find('li.active').removeClass('active');
                var currentAncorObj = $(this);
                currnetIndex = $('ul#myTab').find('li a').index($(this)) + 1;
                currentAncorObj.parent().addClass('active');
                $(currentAncorObj.attr('href')).show();
                currnetIndex++;

                //return false;
            });
        });
... (remaining code snipped out for brevity)

Please access the Codepen demo to see the issue firsthand. Check it out here

jqueryhtmlcsstwitter-bootstrap

Answer №1

Make this change using jQuery:

It should look like this:

var tabContentObj = $('.tab-content .tab-pane');

Prior to the update, it was:

var tabContentObj = $('.tab-content');

You were mistakenly hiding the entire tab-content div instead of just the tab-pane div.

EDIT

Replace this line with:

$(currentAncorObj.attr('data-target')).show().addClass("in");

In the previous code, you were only displaying elements with the specified href. You need to display both elements referenced in the data-target attribute and add the class in.

DEMO

Give it a try and hopefully it resolves your issue.

Answer №2

Check out this functional solution https://jsfiddle.net/L64s4bxh/2/

var tabContentObj = $('.tab-pane');

tabContentObj.hide().removeClass('in');

$(currentAncorObj.attr('data-target')).show().addClass('in');

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

Building a Div Tag Layout with CSS for Full Width and Left Position of 300px

Experiencing some trouble with styling a div element. My goal is to have the div start at left:300px and stretch across the entire width of the browser window. However, when I apply width:100%, the div extends beyond the boundaries of the browser screen. ...

javascripthtmlcss

unable to receive JSONP response through JQuery AJAX

How can I make a cross-domain request to invoke a REST service using Jquery ajax? Here is the code snippet I am currently using. The variables ad1, city, sp, pc, and cn are retrieved using getElementById: url='http://admin:admin@*******:***/rest/aru ...

jquery

Modifying Database Records with Rails and JQuery: Triggering Field Updates on Click

Learning Rails/Jquery is proving to be quite a challenge for me. I'm attempting to update multiple fields in my database from null to true with just a button click (without refreshing the page). I understand that Ajax needs to be involved somehow, bu ...

jquerysqlruby-on-railsrubyajax

Building a dynamic 3-tier selection dropdown menu using an Input feature populated with JSON information

My goal is to create a dynamic dropdown selection group, where each selection depends on the previous one. I have tried the code below, and while I can populate the data for the first dropdown, the second and third dropdowns remain empty. I would greatly a ...

javascripthtmljqueryjson

Restrict the frequency with which a button may be clicked - coding with C#, ASP.NET MVC5, and JavaScript

Is there a way to prevent creating multiple entries when clicking the Create button on my page for Income Types? Upon inspecting the code, I found that it utilizes an ajax method to retrieve information and submit the form to the database. Here is some of ...

javascriptc#jqueryajaxasp.net-mvc-5

The min-height attribute of the tooltip functions, but the min-width attribute does

I found a helpful tooltip on this site: I customized it to work with an input element: <div class="tooltip"> <input type="text" placeholder="Name" name="dp_name"> <span>Full name asd as dasd as dasd</span> </div> ...

htmlcss

Deeply copy a recursive jQuery object using $.extend function

How can I understand the purpose of the first parameter in $.extend function? It mentions deep copy, but what exactly does that mean? I experimented with it, but I didn't notice any significant changes in the output Check out this JSFiddle link for ...

javascriptjquery

Does AngularJS have a similar function to $(document).ajaxSuccess()?

When working with AngularJS, I am looking to implement a universal ajax loader that does not require integration into each controller to function. In jQuery, this can be achieved through the following code: (function globalAjaxLoader($){ "use strict"; ...

javascriptjqueryajaxangularjs

Problem encountered with Blueimp gallery and Twitter Bootstrap

Blueimp gallery is being used to showcase a set of 8 images on a website, divided into two rows. The 5th thumbnail (first image on the second row) appears broken, even though it can be seen in the carousel presentation. Here's the link to view the th ...

javascriptjquerycsstwitter-bootstrap

Tips for expanding a text input field vertically, not horizontally like in Facebook, while typing or by holding down the Shift key and pressing Enter

I've come across numerous plugins that enable vertical resizing of a textarea and others that allow horizontal resizing of an input field. However, I have yet to find one that enables vertical resizing of an input field similar to Facebook's comm ...

jquerycss

Invoke a function within an if block

One element in my user interface is a button that, when clicked, checks the URL of the current tab against one passed in from the database. If they match, I want to trigger a function that makes an AJAX call to retrieve some data. Here's the code snip ...

jqueryajaxif-statement

Using accent marks in AJAX to retrieve information from a database

I'm currently working on compiling a list that can be found at the following link: Within the php file, I have implemented meta tags to handle accents. However, when using ajax to display search results, entering accents such as ö,ü,ő etc in the s ...

phpjavascripthtmlajaxsearch

jquery event for horizontal scrolling - Update

Hello, I am working on a project with a horizontally scrolling gallery and I would like to add dynamic captions that toggle on and off as the user scrolls past each image. The captions are currently static on the page. Here is a mock-up of the page: htt ...

jqueryhtmlscrollhorizontal-scrolling

Sending a substantial amount of HTML via $ajax does not seem to be functioning properly

Creating a product page for an e-commerce platform involves submitting data through an AJAX call to store it in the database. However, there is an issue when large amounts of HTML data are being passed, resulting in nothing being stored in the description ...

jqueryajax

Using jQuery and Modernizr for CSS3 and Javascript transitions support in Internet Explorer

Looking for a way to add support for button hover effects in IE 7-9 on this Codepen.io project. Can anyone help? For example, I'm trying: transition-duration: 0.5s; transition-property: all; transition-timing-function: ease; margin-top: 5px; I atte ...

jquerycsscss-transitionsmodernizr

Can you explain the purpose of the animated class?

$('button').addClass('animated bounce'); $('.well').addClass('animated shake'); $('#target3').addClass('fadeOut'); Can you explain the purpo ...

htmljquerycssbootstrap-5

Verifying if a JavaScript textarea is empty

How can I make a textarea have a visible border around it when the string is empty, without needing to first input and delete text? Here is my current code: $("#message-box").on("keyup", function(){ var charCount = $("#message-box").val().length; ...

javascripthtml

Create a layout that includes options with checkboxes and divs styled inline

I'm in the process of setting up a voting poll on a website. The poll needs to be presented as a radio button followed by a <div> that contains all relevant poll details. In this <div>, I want the option text to appear on the left and the ...

htmlcsslayout

Unveiling the Magic: Enhancing Raphaeljs with Interactive Click Events on a Delicious Slice of the

I'm having trouble responding to a click event on each slice of a Raphael Pie Chart. I've tried implementing the code below, but it doesn't seem to be working. The code is just two lines, commented as "My Code", in the example from the offic ...

javascriptjquerycsssvg

Expanding divs automatically depending on the content they contain

Currently, I have been developing a template for a database-driven page that is supposed to contain four divs for content arranged like this: ----- ----- | 1 | | 2 | ----- ----- ----- ----- | 3 | | 4 | ----- ----- The information in each box will always ...

jquerycsshtml