Toggle arrow error through javascript

JavaScript
1

I want to do this in JAVASCRIPT only…

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…

here is my working:
http://www.acmearchitectural.com/mymobileUsage/html/footer.html

586×551 14.6 KB

2

This your JS, right?

<script>
  function myFunction(obj) {
    var x = document.getElementById(obj);
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>
3

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)

With CSS, you could then do something like

li.active::before {
  transform: rotate(90deg);
}

.tabsSublist {
  display: none;
}

li.active + .tabsSublist {
  display: block;
}

Edit: @chrisofarabia they’re also using some inline scripting.

4

thanks for suggestion, i tried it but code is not working

<script>  
const tabItems = document.querySelectorAll('[data-rel]')
const toggleActive = event => {
  event.currentTarget.classList.toggle('active')
}
const addToggleHandler = item => {
  item.addEventListener('click', toggleActive)
}
Array.from(tabItems).forEach(addToggleHandler)
</script>

css:
li.active::before {
transform: rotate(90deg);
}

.tabsSublist {
display: none;
}

li.active + .tabsSublist {
display: block;
}

5

if possible can you provide me this code in jsfiddle…

6

Works for me… here’s a pen:

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:-)

8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.