XF 1.4 Tabs at the bottom in addition to the top - JS problems - help!

Stuart Wright

Well-known member
Hello folks,
I've found one thread here re a set of tabs at the bottom of the content which wasn't any help, so I'm asking my question in this new thread.
We have implemented bottom tabs in our editorial pages at AVForums.
E.g. https://www.avforums.com/review/fast-furious-7-review.11379
The justification for having bottom tabs is that it makes their content more visible to people just at the point where it will be relevant.
For example, having read the review of Fast & furious 7 in the review linked above, the Discussion tab at the bottom is the link to click (to open the thread) to then comment.
The problem is that the standard Xenforo JS being used can't cope with two sets of
HTML:
class="tabs mainTabs Tabs"
if you click a tab in either the top or bottom tab set and then click a different tab in the other.
For example, open the above page and click the Movie Specs tab in the top set of tabs and then click the Review tab in the bottom set of tabs. The highlighted tab changes, but the actual contents of the tab doesn't.

Our coder John speculates that the JS doesn't 'know' which tab is open in the one set if it's been opened in the other.

Is there an elegant way round this, please? Or do we have to rewrite the JS handling tabs?
Many thanks.
 
Last edited:
Your tabs (the second one) looks strange and has content with empty panes. You would have to check your html code or, if you have one, your custom JavaScript. The normal behaviour would be that each tabs would correctly manage the panes BUT without any relations between them. So if tabTop#2 is clicked on, tabBottom#2 will not be activated and will stay on tabBottom#1. To make them related, you need to use the JqueryTools api (you can do it with simple jQuery but it would be less clean).
Here's a demo with the JavaScript:
Code:
<div id="MyContainer">
   <ul id="custTabsTop" class="Tabs tabs" data-panes="#myPanes > li">
     <li><a href="#">a</a></li>
     <li><a href="#">b</a></li>
     <li><a href="#">c</a></li>   
   </ul>
   
   <ul id="myPanes">
     <li>Content a</li>
     <li>Content b</li>   
     <li>Content c</li>     
   </ul>
   
   <ul id="custTabsBottom" class="Tabs tabs" data-panes="#myPanes > li">
     <li><a href="#">a</a></li>
     <li><a href="#">b</a></li>
     <li><a href="#">c</a></li>   
   </ul>
</div>

<script>
if(typeof MyProject == 'undefined') MyProject = {};
!function($, window, document, _undefined)
{
   MyProject.manageCustTabs = function($container)
   {
     $custTabs = $container.find('#custTabsTop, #custTabsBottom');
     
     $custTabs.click(function(){
       var $currentTab = $(this),
         api = $currentTab.data('tabs'),
         currentIndex = api.getIndex();
       
       $custTabs.each(function(){
         if($(this) == $currentTab) return;
         var api2 = $(this).data('tabs');
         api2.click(currentIndex);
       });
     });     
   }
     
   XenForo.register('#MyContainer', 'MyProject.manageCustTabs');
}
(jQuery, this, document);
</script>

Note that with this code you should be able to have more than two tabs enabled... if you want to add a third one at the middle of your article ^^
 
Your tabs (the second one) looks strange and has content with empty panes. You would have to check your html code or, if you have one, your custom JavaScript. The normal behaviour would be that each tabs would correctly manage the panes BUT without any relations between them. So if tabTop#2 is clicked on, tabBottom#2 will not be activated and will stay on tabBottom#1. To make them related, you need to use the JqueryTools api (you can do it with simple jQuery but it would be less clean).
Here's a demo with the JavaScript:
Code:
<div id="MyContainer">
   <ul id="custTabsTop" class="Tabs tabs" data-panes="#myPanes > li">
     <li><a href="#">a</a></li>
     <li><a href="#">b</a></li>
     <li><a href="#">c</a></li>  
   </ul>
  
   <ul id="myPanes">
     <li>Content a</li>
     <li>Content b</li>  
     <li>Content c</li>    
   </ul>
  
   <ul id="custTabsBottom" class="Tabs tabs" data-panes="#myPanes > li">
     <li><a href="#">a</a></li>
     <li><a href="#">b</a></li>
     <li><a href="#">c</a></li>  
   </ul>
</div>

<script>
if(typeof MyProject == 'undefined') MyProject = {};
!function($, window, document, _undefined)
{
   MyProject.manageCustTabs = function($container)
   {
     $custTabs = $container.find('#custTabsTop, #custTabsBottom');
    
     $custTabs.click(function(){
       var $currentTab = $(this),
         api = $currentTab.data('tabs'),
         currentIndex = api.getIndex();
      
       $custTabs.each(function(){
         if($(this) == $currentTab) return;
         var api2 = $(this).data('tabs');
         api2.click(currentIndex);
       });
     });    
   }
    
   XenForo.register('#MyContainer', 'MyProject.manageCustTabs');
}
(jQuery, this, document);
</script>

Note that with this code you should be able to have more than two tabs enabled... if you want to add a third one at the middle of your article ^^
I will show this to John, thank you very much, cclaerhout.
 
Top Bottom