Tab-content not showing up

Question

I'm working with tabs that show content for two data-target(no problem in that). I've added a script which automatically changes tab after 5 sec. Tab changes but the tab-content doesn't show up. I don't know why. Any help would be appreciated. Thanks.

Codepen 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;
            });
        });

.how-it-works {
	padding-bottom: 30px;
}
.board .nav-tabs {
	position: relative;
	margin: 40px auto;
	margin-bottom: 0;
	box-sizing: border-box;
}
.board > div.board-inner > .nav-tabs {
	border: none;
}
p.narrow{
	width: 60%;
	margin: 10px auto;
}
.liner{
	height: 2px;
	background: #ddd;
	position: absolute;
	width: 80%;
	margin: 0 auto;
	left: 0;
	right: 0;
	top: 50%;
	z-index: 1;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
	color: #555555;
	cursor: default;
	border: 0;
	border-bottom-color: transparent;
	outline: 0;
}
span.round-tabs{
	width: 70px;
	height: 70px;
	line-height: 70px;
	display: inline-block;
	border-radius: 100px;
	background: white;
	z-index: 2;
	position: absolute;
	left: 0;
	text-align: center;
	font-size: 25px;
}
span.round-tabs.one{
	border: 2px solid #ddd;
	color: #ddd;
}
li.active span.round-tabs.one, li.active span.round-tabs.two, li.active span.round-tabs.three, li.active span.round-tabs.four, li.active span.round-tabs.five{
	background: #36ABE7 !important;
	border: 2px solid #2AC7CC;
	color: #fff;
}

span.round-tabs,.two{
	border: 2px solid #ddd;
	color: #ddd;
}
span.round-tabs,.three{
	border: 2px solid #ddd;
	color: #ddd;
}
span.round-tabs,.four{
	border: 2px solid #ddd;
	color: #ddd;
}
span.round-tabs,.five{
	border: 2px solid #ddd;
	color: #ddd;
}
.nav-tabs > li.active > a.span.round-tabs{
	background: #fafafa;
}
.nav-tabs > li{
	width: 20%;
}
.nav-tabs > li a{
	width: 70px;
	height: 70px;
	margin: 0px auto;
	border-radius: 100%;
	padding: 0;
}

.nav-tabs > li a:hover{
	background: transparent;
}
.tab-pane{
	position: relative;
	padding-top: 50px;
}
.btn-outline-rounded{
	padding: 10px 40px;
	margin: 20px 0;
	border: 2px solid transparent;
	border-radius: 25px;
}
.btn.green{
	background-color: #69cb95;
	color: #fff;
}
@media(max-width: 585px){
	.board{
		width: 90%;
		height: auto !important;
	}
	span.round-tabs{
		font-size: 16px;
		width: 50px;
		height: 50px;
		line-height: 50px;
	}
	.tab-content.head{
		font-size:20px;
	}
	.nav-tabs > li a{
		width: 50px;
		height: 50px;
		line-height: 50px;
	}
	li.active:after{
		content:"";
		position: absolute;
		left: 35%;
	}
	.btn-outline-rounded{
		padding: 12px 20px;
	}
}






			Our Services
			
				
					
						
							
									
										Service Title 1
									
									
										Service Title 2
									
									
										Service Title 3
									
									
										Service Title 4
									
									
										Service Title 5
									
							
						
					
					
						
							
							
								
									
									
										
							  
									  
							  
										

									
							 
								 
							 
									
									
									
							 
								  
							  
									

									
								 
									  
								 
									

									
								 
									  
								  
									

								

							
								

									
										
											
												
											
											
												Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget viverra sem. Curabitur lobortis bibendum odio ac varius. Ut non felis varius, viverra nibh vel, luctus neque. Nullam eget ante a felis lacinia convallis. Vestibulum varius metus sit amet aliquam convallis. Pellentesque vel venenatis justo. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus.Vestibulum finibus rhoncus urna quis dapibus.Vestibulum finibus rhoncus urna quis dapibus.
												
													 Know More 
												
											
										
									

									
								
								
									
										
											
												
											
											
												Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget viverra sem. Curabitur lobortis bibendum odio ac varius. Ut non felis varius, viverra nibh vel, luctus neque. Nullam eget ante a felis lacinia convallis. Vestibulum varius metus sit amet aliquam convallis. Pellentesque vel venenatis justo. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus.Vestibulum finibus rhoncus urna quis dapibus.Vestibulum finibus rhoncus urna quis dapibus.
												
													 Know More 
												
											
										
									

								
								
									
										
											
												
											
											
												Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget viverra sem. Curabitur lobortis bibendum odio ac varius. Ut non felis varius, viverra nibh vel, luctus neque. Nullam eget ante a felis lacinia convallis. Vestibulum varius metus sit amet aliquam convallis. Pellentesque vel venenatis justo. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus.Vestibulum finibus rhoncus urna quis dapibus.Vestibulum finibus rhoncus urna quis dapibus.
												
													 Know More 
												
											
										
									
								
								
									
											
												
											
											
												Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget viverra sem. Curabitur lobortis bibendum odio ac varius. Ut non felis varius, viverra nibh vel, luctus neque. Nullam eget ante a felis lacinia convallis. Vestibulum varius metus sit amet aliquam convallis. Pellentesque vel venenatis justo. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus.Vestibulum finibus rhoncus urna quis dapibus.Vestibulum finibus rhoncus urna quis dapibus.
												
													 Know More 
												
											
										
								
								
									
										
											
												
											
											
												Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eget viverra sem. Curabitur lobortis bibendum odio ac varius. Ut non felis varius, viverra nibh vel, luctus neque. Nullam eget ante a felis lacinia convallis. Vestibulum varius metus sit amet aliquam convallis. Pellentesque vel venenatis justo. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus. Vestibulum finibus rhoncus urna quis dapibus.Vestibulum finibus rhoncus urna quis dapibus.Vestibulum finibus rhoncus urna quis dapibus.
												
													 Know More

Please look at the codepen. Snippet have some problem. 1

Nirav Joshi · Accepted Answer

Change this line in jQuery

it should be like this

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

it was

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

You were hiding whole tab-content div You have to only hide tab-pane div

EDIT

Replace this line

$(currentAncorObj.attr('href')).show();

With this

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

before this you only show href elements you have to show both element which are in data-target attribute and also for have add class in.

DEMO

Try with it hope it will helps you.

Tab-content not showing up

Answers (2)

Related Questions