Toggle Tab Content on Click Issues
Having some issues with my click/toggle function for my tabs. We are doing a "tabbed" navigation which also does "next/previous" to go back and fourth between the tabs. The tabs should open when clicked, and close when clicked - however they should remain open when you click on different tabs if you have one tab open already.
It seems really shotty and I think its because the function 1) I'm not great at jquery and 2) I think its getting confused when you click on a tab while a tab is already open. The page also seems to be dropping down to the "anchor" location. The link is
here and my code for the tabs and next/prev and the toggle for the tab content is below
- $('#tab-buttons-container').easytabs();
-
- var $tabContainer = $('#tab-buttons-container'),
- $tabs = $tabContainer.data('easytabs').tabs,
- $tabPanels = $(".tab-buttons-panel")
- totalSize = $tabPanels.length;
-
- $tabPanels.each(function(i){
- if (i != 0) {
- prev = i - 1;
- $(this).prepend("<a href='#' class='prev-tab btn success' rel='" + prev + "'>« Prev Page</a>");
- } else {
- $(this).prepend("<span class='prev-tab btn'>« Prev Page</span>");
- }
- if (i+1 != totalSize) {
- next = i + 1;
- $(this).prepend("<a href='#' class='next-tab btn success' rel='" + next + "'>Next Page »</a>");
- } else {
- $(this).prepend("<span class='next-tab btn'>Next Page »</span>");
- }
- });
-
- $('.next-tab, .prev-tab').click(function() {
- var i = parseInt($(this).attr('rel'));
- var tabSelector = $tabs.children('a:eq(' + i + ')').attr('href');
- $tabContainer.easytabs('select', tabSelector);
- return false;
- });
-
- $('.click').click(function() {
- $('.panel-container').toggle('fast', function() {
- // Animation complete.
- });
- });
Any help would be AMAZING!