добавить класс и удалить класс JS, работающий только с одним div на странице. Не работает на других с той же спецификацией

Question

Я не разработчик JS (даже не новичок) Я пытаюсь заставить работать код, который я написал здесь http://spintrak.com/newwebsiteredesign2/faqs/

Я работаю с аккордеоном и http://prntscr.com/nnif5e в том смысле, что вы видите «синий», если кто-то щелкнет по этому аккордеону, этот «синий» в имени класса изменится на «красный», это прекрасно работает, однако, то же самое Функция и класс в аккордеоне ниже не работают: / В основном, что я хочу сделать, это когда аккордеон открывается, он меняет цвет, например: посещен для ссылки, чтобы пользователь знал, что он прочитал его, я подумал, что если я смогу изменить класс (не переключаться) это можно сделать

Я использовал удалить список классов Javascript, а затем добавить onclick, чтобы изменить класс

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

Это работает для первого аккордеона, а не для других

Answer 1

На первый взгляд кажется, что проблема заключается в том, что вы выбираете элемент по идентификатору, поэтому он работает только для одного. Для этого случая я бы просто использовал jQuery, а не vanilla javascript, так как WordPress уже загружает jQuery. Вы также можете использовать Visual composer для назначения классов, поэтому вместо присвоения ему идентификатора 'testwork' присвойте всем элементам аккордеона класс, скажем, 'accordion_color_switch'. Тогда код будет просто:

//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');
    }
}

Это должно сработать, дайте мне знать, если оно не работает, с Visual Composer иногда сложно выбрать правильный элемент.

Редактировать: Не забудьте удалить onClick="toggleColor()" из ваших элементов, так как мы больше не используем это.