Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
By noovocreative on
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
but nothing works.
How should anybody be able to help you with such a detailed error description?
I like cookies!
ah sorry.. when I say nothing
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.
Without having access to an
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!
Thanks Stefan, the JS is
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:
I am at a loss as how to get this working.
Have you checked you browser
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
Is JS really Loading on Page Load?
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