I’ve got some tabs that transition in and out by fading.
The functionality of the tabs goes as follows
User click on tab
The tab then expands down
The user can then tab through other tabs without panel closing (fade transition)
The user can also click on same tab to collapse the tab up
My issue is when the tab panel has been expanded, then closed, then a person clicks on another tab to re-expand it.
I’m using a hash anchor to match up the tabs tot he content and it jumps the div to the top of the page. How do I disable this jumping behavior when the user re-expands the tabs a second time?
Here is my code
<script type="text/javascript">
jQuery(document).ready(function ($) {
$('#tab-container').easytabs({
collapsible: true,
collapsedByDefault: true,
});
var $tabContainer = $('#tab-container'),
$tabs = $tabContainer.data('easytabs').tabs,
$tabPanels = $(".panel")
totalSize = $tabPanels.length;
});
</script>
<div id="tab-container" class='tab-container'>
<ul class='etabs'>
<li class='tab'><a href="#tab1">About</a></li>
<li class='tab'><a href="#tab2">Committees</a></li>
<li class='tab'><a href="#tab3">Events</a></li>
<li class='tab'><a href="#tab4">Grants & Support</a></li>
<li class='tab'><a href="#tab5">Knowledge Base</a></li>
<li class='tab tabActive'><a href="#tab6">Blog</a></li>
<li class='tab'><a href="#tab7">Forum</a></li>
<li class='tab'><a href="#tab8">Submit</a></li>
</ul>
<div class='panel-container'>
<div id="tab1" class="panel">
<div class="container_50">
<h2>About</h2>
<div class="panelContent">
text
</div>
</div>
</div>
<div id="tab2" class="panel">
<div class="container_50">
<h2>Committees</h2>
<p>
text
</p>
</div>
</div>
<div id="tab3" class="panel">
<div class="container_50">
<h2>Events</h2>
<p>
text
</p>
</div>
</div>
<div id="tab4" class="panel">
<div class="container_50">
<h2>Grants & Support</h2>
<p>
text
</p>
</div>
</div>
<div id="tab5" class="panel">
<div class="container_50">
<h2>Knowledge Base</h2>
<p>
text
</p>
</div>
</div>
<div id="tab6" class="panel">
<div class="container_50">
<h2>Blog</h2>
<p>
text
</p>
</div>
</div>
<div id="tab7" class="panel">
<div class="container_50">
<h2>Forum</h2>
<p>
text
</p>
</div>
</div>
<div id="tab8" class="panel">
<div class="container_50">
<h2>Submit</h2>
<p>
text
</p>
</div>
</div>
suggestions?
I’ve tried this already :
<script type=“text/javascript”>
/* <![CDATA[ /
( function( $ ) {
$( ‘a[href=“#”]’ ).click( function(e) {
e.preventDefault();
} );
} )( jQuery );
/ ]]> */
</script>