How to insert jQuery code in Avada theme?

Question

I want to insert a simple jQuery code in my Wordpress theme (Avada), something like this:

$(function() {
    $("#tabs").tabs({ show: { effect: "blind", direction: "right", duration:300 }});
    $( "#accordion" ).accordion();

    var btn = $('#accordion li a');
    var wrapper = $('#accordion li');

    $(btn).on('click', function() {
        $(btn).removeClass('active');
        $(btn).parent().find('.addon').removeClass('fadein');

        $(this).addClass('active');
        $(this).parent().find('.addon').addClass('fadein');
    });
});

In a page, but it doesn't work.

I tried to use different classes to all the HTML elements and to insert my code with a plugin named "CSS & Javascript Tool box", but it didn't helped.

Answer 1

You are using Avada theme, go to theme options->Advance->Code Fields (Tracking etc.), you will see three text boxes you need to add your code in the second box (Space before ). Place code inside tags. I am attaching the screenshot.

Answer 2

Simply add your script code to your functions.php file. What this does is centralize your script code without much work. Your only requisite is that you have JQuery defined before you consume the script.

There are many ways to solve what you are asking but I tend to lean towards getting the information from the source. The link below will hopefully help.

https://codex.wordpress.org/Using_Javascript

Answer 3

First don't use any CSS/JS plugin, it's a terrible idea as such plugins are usually the reason for major security issues and doesn't provide any good maintainability.

Here is the proper way to add Javascript in Wordpress :

In your child theme (because you created a child theme to Avada in order to be able to update it at any time, right? :) ), add the following function in your functions.php file:

function my_theme_scripts() {
    wp_register_script('jquery-ui', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js', array('jquery'), '1.11.2', true);
    wp_enqueue_script('jquery-ui');
    wp_register_script('tabs-scripts', get_stylesheet_directory_uri() . '/js/tabs-script.js', array('jquery', 'jquery-ui'), '1.0', true);
    wp_enqueue_script('tabs-scripts');
    wp_enqueue_style('jquery-style', 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css');
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

This will tell Wordpress to add the appropriate script tag to link to tabs-scripts.js located in your theme js directory at the footer of every page, and to load the jQuery UI dependency. See wp_register_script documentation for reference.

Then, create your tabs-scripts.js file in your js directory and add the following script:

jQuery(document).ready(function($) {
    if($('#tabs').length && $('#accordion').length) {
        $("#tabs").tabs({ show: { effect: "blind", direction: "right", duration:300 }});
        $( "#accordion" ).accordion();

        var btn = $('#accordion li a');
        var wrapper = $('#accordion li');

        $(btn).on('click', function() {
            $(btn).removeClass('active');
            $(btn).parent().find('.addon').removeClass('fadein');

            $(this).addClass('active');
            $(this).parent().find('.addon').addClass('fadein');
        });
    }
}

This will ensure two things:

• That $ is available and reference to jQuery
• And the appropriate DOM elements #tabs and #accordion are in the page before running the script.

If it doesn't work check that the script is added to the page, and that the ($('#tabs').length && $('#accordion').length)) is fulfilled.