Issue with using button to toggle through tabs.

Topic: Issue with using button to toggle through tabs.

zyrus pro asked 8 years ago

Hi, i have a tabbed element that has prev/next buttons below the content to enable cycling through the tab contents. I use this code: PREV NEXT They work fine when they are clicked for the first time. But when I cycle through the tabs again using the tablist (or when I go back to any previous tab), they stop working. Is there an additional code needed to make this work? Thanks.

Add comment

Magdalena Obalska free answered 8 years ago

0 0 Best answer

Please insert min. 20 characters.

I still have some problems with displaying your code, but I'll try to help. First of all: reorganize your code. Put tabs list (ul with li's) and your tabs content (you can close it in a div, let's say: div class="tab-content") in the main wrapper (here it's: div class="tabs-wrapper"). Use only two buttons, outside of your main content. Look at the code below - here's how your buttons and your script code for buttons should look like.

<div class="btn-group">
    <button class="btn" id="prevtab" type="button" data-toggle="tab">Prev</button>
    <button class="btn" id="nexttab" type="button" data-toggle="tab">Next</button>
</div>

var $tabs = $('.tabs-wrapper li');
$('#prevtab').on('click', function() {
    $tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
});
$('#nexttab').on('click', function() {
    $tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
});

Add comment

zyrus pro answered 8 years ago

0 0 Best answer

Here's the code sample. So i want to be able to use the "prev" and "next" buttons to naigate through tabs. it works initially (meaning i can click on the buttons once) but once i go backward/forward, they'd not work anymore.

<pre><code>
<div class="tabs-wrapper"> 
	<ul class="nav classic-tabs tabs-3" role="tablist">
		<li class="nav-item nav-item-panel-1">
			<a class="nav-link waves-light active" data-toggle="tab" href="#panel-1" aria-controls="panel-1" role="tab">First Tab</a>
		</li>
		<li class="nav-item nav-item-panel-2">
			<a class="nav-link waves-light" data-toggle="tab" href="#panel-2" aria-controls="panel-2" role="tab">Second Tab</a>
		</li>
		<li class="nav-item nav-item-panel-3">
			<a class="nav-link waves-light" data-toggle="tab" href="#panel-3" aria-controls="panel-3" role="tab">Third Tab</a>
		</li>
	</ul>
</div>

<div class="tab-content">
	
	<div class="tab-pane fade in show active" id="panel-1" role="tabpanel">
		{content}
		<a class="btn btn-next" id="next-1" data-toggle="tab" href="#panel-2" aria-controls="#panel-2">NEXT</a>
	</div>
	
	<div class="tab-pane fade in" id="panel-2" role="tabpanel">
		{content}
		<a class="btn btn-prev" id="prev-2" data-toggle="tab" href="#panel-1" aria-controls="#panel-1">PREV</a>
		<a class="btn btn-next" id="next-2" data-toggle="tab" href="#panel-2" aria-controls="#panel-3">NEXT</a>
	</div>
	
	<div class="tab-pane fade in" id="panel-2" role="tabpanel">
		{content}
		<a class="btn btn-prev" id="prev-3" data-toggle="tab" href="#panel-2" aria-controls="#panel-2">PREV</a>
	</div>
</div></code></pre>

Please insert min. 20 characters.

<!--Nav tabs-->
<div class="tabs-wrapper"> 
	<ul class="nav classic-tabs tabs-3" role="tablist">
		<li class="nav-item nav-item-panel-1">
			<a class="nav-link waves-light active" data-toggle="tab" href="#panel-1" aria-controls="panel-1" role="tab">First Tab</a>
		</li>
		<li class="nav-item nav-item-panel-2">
			<a class="nav-link waves-light" data-toggle="tab" href="#panel-2" aria-controls="panel-2" role="tab">Second Tab</a>
		</li>
		<li class="nav-item nav-item-panel-3">
			<a class="nav-link waves-light" data-toggle="tab" href="#panel-3" aria-controls="panel-3" role="tab">Third Tab</a>
		</li>
	</ul>
</div>

<!--Tab panels-->
<div class="tab-content">
	<!--Panel 1-->
	<div class="tab-pane fade in show active" id="panel-1" role="tabpanel">
		{content}
		<a class="btn btn-next" id="next-1" data-toggle="tab" href="#panel-2" aria-controls="#panel-2">NEXT</a>
	</div>
	<!--Panel 2-->
	<div class="tab-pane fade in" id="panel-2" role="tabpanel">
		{content}
		<a class="btn btn-prev" id="prev-2" data-toggle="tab" href="#panel-1" aria-controls="#panel-1">PREV</a>
		<a class="btn btn-next" id="next-2" data-toggle="tab" href="#panel-2" aria-controls="#panel-3">NEXT</a>
	</div>
	<!--Panel 3-->
	<div class="tab-pane fade in" id="panel-2" role="tabpanel">
		{content}
		<a class="btn btn-prev" id="prev-3" data-toggle="tab" href="#panel-2" aria-controls="#panel-2">PREV</a>
	</div>
</div>

Add comment

Magdalena Obalska free answered 8 years ago

0 0 Best answer

Zyrus, could you send me also your tabs code? It would be much easier to understand what's going wrong.

Add comment

zyrus pro answered 8 years ago

0 0 Best answer

Suppose I have 3 tabs: tab-1, tab-2, tab-3. When Inside tab-2 contents, are these buttons: — <a class="btn btn-prev" id="prev-2" data-toggle="tab" href="#tab-1-contents" aria-controls="#tab-1-contents">PREV</a> <a class="btn btn-next" id="next-2" data-toggle="tab" href="#tab-3-contents" aria-controls="#tab-3-contents">NEXT</a>

Add comment

zyrus pro answered 8 years ago

0 0 Best answer