Remotely Trigger Varien Tabs Class


/ Published in: JavaScript
Save to your folder(s)

extends the default varien "tabs" class to allow other links on the page to open a tab


Copy this code and paste it in your HTML
  1. // Located in tab.phtml
  2. // Around Line 45 you are going to want to replace the <script> block with this
  3. <script type="text/javascript">
  4. //<![CDATA[
  5. Varien.Tabs = Class.create();
  6. Varien.Tabs.prototype = {
  7. initialize: function(selector) {
  8. var self=this;
  9. $$(selector+' a').each(this.initTab.bind(this));
  10. },
  11.  
  12. initTab: function(el) {
  13. el.href = 'javascript:void(0)';
  14. if ($(el.parentNode).hasClassName('active')) {
  15. this.showContent(el);
  16. }
  17. el.observe('click', this.showContent.bind(this, el));
  18. },
  19.  
  20. showContent: function(a) {
  21. var li = $(a.parentNode), ul = $(li.parentNode);
  22. ul.getElementsBySelector('li').each(function(el){
  23. var contents = $(el.id+'_contents');
  24. if (el==li) {
  25. el.addClassName('active');
  26. contents.show();
  27. } else {
  28. el.removeClassName('active');
  29. contents.hide();
  30. }
  31. });
  32. },
  33.  
  34. remoteTabs: function(b) {
  35. var controlledLink = $$("#"+b+" a")[0];
  36. this.showContent(controlledLink);
  37. }
  38.  
  39. }
  40. var csTablist = new Varien.Tabs('.tabs');
  41. //]]>
  42. </script>
  43.  
  44. // to allow the link to fire remotely you can add the following to the link <a>
  45. onclick="javascript:csTablist.remoteTabs('product_tabs_email');
  46. //Where product_tabs_email is the name of the li that you want to open.
  47. // stolen from this post: http://www.magentocommerce.com/boards/viewreply/262411/

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.