I am trying to add some jquery tabs to my node template.

I have added the following to a custom js file and added the name of the js file to my .info file in my theme.

I have added the html to my 'node--NODENAME.tpl.php' but nothing works.

Any ideas what I am doing wrong?

(function ($) {  

      Drupal.behaviors.exampleBehavior = {
        attach: function (context, settings) {            
         // All your code here
   
   
   
   $('ul.tabs').each(function(){
    // For each set of tabs, we want to keep track of
    // which tab is active and it's associated content
    var $active, $content, $links = $(this).find('a');

    // If the location.hash matches one of the links, use that as the active tab.
    // If no match is found, use the first link as the initial active tab.
    $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
    $active.addClass('active');

    $content = $($active[0].hash);

    // Hide the remaining content
    $links.not($active).each(function () {
      $(this.hash).hide();
    });

    // Bind the click event handler
    $(this).on('click', 'a', function(e){
      // Make the old tab inactive.
      $active.removeClass('active');
      $content.hide();

      // Update the variables with the new link and content
      $active = $(this);
      $content = $(this.hash);

      // Make the tab active.
      $active.addClass('active');
      $content.show();

      // Prevent the anchor's default click action
      e.preventDefault();
    });
  });
   
   
   
   
         
           // All your code here
       }
     };

   })(jQuery);
   
   

Comments

Stefan Lehmann’s picture

but nothing works.

How should anybody be able to help you with such a detailed error description?

I like cookies!

noovocreative’s picture

ah sorry.. when I say nothing works....

The tabs do not work, I can see the tabs on the page but its clear the JQUERY is not working... like ive added the code to the js file wrong.

Stefan Lehmann’s picture

Without having access to an example URL it's really hard to tell where the bug might be. There are literally 100s of things which could be wrong.

As you are probably the only one who has access to that system you will have to debug it by using a browser inspector. First step would be to understand the code which you obviously just copy & pasted from somewhere and check that it's included and executed properly on page load.

I like cookies!

noovocreative’s picture

Thanks Stefan, the JS is obviously loading as when I remove the file I get a warning saying it is missing.

And yes I have copied the jquery code, but have tried various pieces of code with no positive results.

I have followed all instructions by wrapping the jquery in the following:

(function ($) {  

      Drupal.behaviors.exampleBehavior = {
        attach: function (context, settings) {            
         // All your code here
         
           // All your code here
       }
     };

   })(jQuery);

I am at a loss as how to get this working.

jackenmail’s picture

Have you checked you browser console?
If it is clean then try any alert whether is working or not.

https://www.drupal.org/node/171213

arun.kumar09’s picture

You can check if JS is really Loading by trying to print some alerts.
If you are sure that JS is really Loading, next step will be trying to print alerts from inside the functions you have declared in the JS file.
This way you can make sure that the functions in JS works fine and gives you an idea if the problem is in JS file or in any other settings you have defined