I am not a JS developer (not a newbie even) I am trying to get a code to work that I wrote here http://spintrak.com/newwebsiteredesign2/faqs/

I'm working with accordion and http://prntscr.com/nnif5e in that you see "blue" if someone clicks that accordion, that "blue" in class name will change to "red" this works perfectly, however, the same function and class in the accordion below it doesn't work :/ Basically what I want to do is when accordion is opened, it changes color, like :visisted for link so user know they have read it, I thought if I can change class (not toggle) this could be done

I used Javascript classlist remove and then add onclick to change the class

function toggleColor() { document.getElementById("testwork").classList.remove("vc_toggle_color_blue");
  document.getElementById("testwork").classList.add("vc_toggle_color_red");
}

It works for first accordion, not the others

1 Answers

2
VoidZA On Best Solutions

At a quick glance, it seems the problem is that you are selecting the element by ID, which is why it is only working for the one. For this case I would just use jQuery rather than vanilla javascript, since WordPress already loads jQuery. You can use Visual composer to assign classes as well, so in stead of giving it the id of 'testwork', give all accordion items a class, lets say 'accordion_color_switch'. Then the code will just be:

//Remember in WordPress we have to use the 'jQuery' selector instead of '$'.
//Lets first load our function when the document has loaded.
jQuery(document).ready(function(){
    //We listen for the user to click on the accordion items
    jQuery(document).on('click', '.accordion_color_switch', function() {
        //We send the clicked item to the toggle color function.
        toggleColor(jQuery(this));
    });
});
function toggleColor($target) {
    //If the item still has the blue color, change it, otherwise it has already been changed.
    if ($target.hasClass('vc_toggle_color_blue')) {
        $target.removeClass('vc_toggle_color_blue');
        $target.addClass('vc_toggle_color_red');
    }
}

That should do the trick, let me know if it is not working, with visual composer it is sometimes tricky to select the correct element.

Edit: Remember to remove the onClick="toggleColor()" from your elements, since we are not using that anymore.