I have a desktop and mobile view list on mobile view when i am clicking on tab my sub-list is opening, but my toggle right arrow is not changing to down arrow…
and also i want to call hide and show classes from my css i tried it but no luck…
This won’t be possible as those arrows are pseudo elements, and pseudo elements are not actually part of the DOM and can’t be manipulated with JS. So you either have to make them real elements (say spans), or apply a class to the host element and use CSS.
You might add an event listener to the tab items which would toggle an active class:
// Get all tab items -- maybe give them an appropriate
// class here instead of just the data-attributes
const tabItems = document.querySelectorAll('[data-rel]')
// Toggle an "active" class on the element to
// which the event listener was attached
const toggleActive = event => {
event.currentTarget.classList.toggle('active')
}
// Add an event listener to a given item
const addToggleHandler = item => {
item.addEventListener('click', toggleActive)
}
// Iterate over the tab items and add the toggle
// handler to each
Array.from(tabItems).forEach(addToggleHandler)
As a small adjustment, I’ve just nested the sub-items inside the corresponding top-level items to reflect the accordion hierarchy… but it would of course work just as well with the adjacent-sibling selector as shown above. And yes, I am quite a pedant. :-P
(Edit: Note that I’ve also been using some ES6 syntax… so the JS might break in older browsers. Are you maybe getting any such errors in the console?)
J4F, here’s also a CSS-only solution using the infamous checkbox-hack. 0:-)