Why is the display value stuck on 'none'?

Question

In my code, I am looping through a node list that selects the right link, when the node list is clicked. (The links are basically buttons that show and hide text under them when clicked)

(the node list = footerLink and the text that is shown when one of the links are clicked = linkContent

footerPlus = plus icon shown when link has not been clicked and footerMinus = minus icon shown when link has been clicked)

The problem is that after I set footerMinus to display = none as its initial state when the page is loaded, when I clicked on the node list, nothing happened. It did not respond. I checked by inspecting it and it turns out that even after I clicked it display remained as none. However, when I removed the initial display = 'none' the text was actually shown after clicking the link. But I cannot leave it like this because the footerMinus is meant to be hidden while the link has not been clicked.

Is there another way of completely hiding the icon without the code being stuck on display = 'none'?

It does not fully work properly as well. For example, the links are under each other and when one is clicked, it actually changes the icon of the one under it instead of its own. I think it has to do with the value of i in the loops. Maybe I should make it i + 1 instead. Clicking the first link changes the first as well as the second icon. The rest of them change the one directly under them, except from the last one which does not change anything.

The JavaScript:

const footerLink = document.querySelectorAll('.footer-link')
const linkContent = document.querySelectorAll('.link-content')
const footerPlus = document.querySelectorAll('.footer-plus')
const footerMinus = document.querySelectorAll('.footer-minus')

// footer

for (i = 0; i < linkContent.length; ++i) {
    linkContent[i].style.display = 'none'
    footerMinus[i].style.display = 'none' // The line that changes everything
}

function footerClick(content) {
    if (content.style.display == 'none') {
        content.style.display = 'block'
    } else {
        content.style.display = 'none'
    }
}


footerLink.forEach(function (link) {
    link.addEventListener('click', function (e) {
        const which = e.currentTarget.classList
        if (which.contains('help')) {
            for (i = 0; i < linkContent.length; ++i) {
                let content = linkContent[i]
                if (linkContent[i].classList.contains('help')) {
                    footerClick(content)

                    if (linkContent[i].style.display == 'none') {
                        footerMinus[i].style.display = 'grid'
                        footerPlus[i].style.display = 'grid'
                    } else {
                        footerMinus[i].style.display = 'grid'
                        footerPlus[i].style.display = 'none'
                    }
                }
            }
        }
        if (which.contains('careers')) {
            for (i = 0; i < linkContent.length; ++i) {
                let content = linkContent[i]
                if (linkContent[i].classList.contains('careers')) {
                    footerClick(content)
                    if (linkContent[i].style.display == 'none') {
                        footerMinus[i].style.display = 'none'
                        footerPlus[i].style.display = 'grid'
                    } else {
                        footerMinus[i].style.display = 'grid'
                        footerPlus[i].style.display = 'none'
                    }
                }
            }
        }
        if (which.contains('sites')) {
            for (i = 0; i < linkContent.length; ++i) {
                let content = linkContent[i]
                if (linkContent[i].classList.contains('sites')) {
                    footerClick(content)
                    if (linkContent[i].style.display == 'none') {
                        footerMinus[i].style.display = 'none'
                        footerPlus[i].style.display = 'grid'
                    } else {
                        footerMinus[i].style.display = 'grid'
                        footerPlus[i].style.display = 'none'
                    }
                }
            }
        }
        if (which.contains('newsroom')) {
            for (i = 0; i < linkContent.length; ++i) {
                let content = linkContent[i]
                if (linkContent[i].classList.contains('newsroom')) {
                    footerClick(content)
                    if (linkContent[i].style.display == 'none') {
                        footerMinus[i].style.display = 'none'
                        footerPlus[i].style.display = 'grid'
                    } else {
                        footerMinus[i].style.display = 'grid'
                        footerPlus[i].style.display = 'none'
                    }
                }
            }
        }
        if (which.contains('franchising')) {
            for (i = 0; i < linkContent.length; ++i) {
                let content = linkContent[i]
                if (linkContent[i].classList.contains('franchising')) {
                    footerClick(content)
                    if (linkContent[i].style.display == 'none') {
                        footerMinus[i].style.display = 'none'
                        footerPlus[i].style.display = 'grid'
                    } else {
                        footerMinus[i].style.display = 'grid'
                        footerPlus[i].style.display = 'none'
                    }
                }
            }
        }
    });
})

So how do I get it to actually display the content it is meant to?

And also how do I get it to actually change the icon next to it instead of the one below it?

Answer 1

You may have no choice but to use JS, but generally speaking, try not to "reinvent the wheel"

Here I'm using bootstrap 5 tabs but the JS code that handles the transitions uses the data provided in the button data- attributes to connect button to associated target. The fade effect and +/- button is handled by CSS.

At the least this should help you rethink and lighten your current code.

.nav-tabs .nav-link:after {
 margin-left:4px;
 content: '\02500';
 font-size:1em;
 line-height:1.1;
 display:inline-block;
 font-family:Georgia, "Apple Symbols", serif;
}

.nav-tabs .nav-link.active:after {
 content: '\0253C';
}

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

<nav class="p-4 pb-0">
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" type="button"
            role="tab" aria-controls="nav-home" aria-selected="true"
            data-bs-toggle="tab" 
            data-bs-target="#nav-home" >Home</button>
            
    <button class="nav-link" id="nav-profile-tab" type="button"
            role="tab" aria-controls="nav-profile" aria-selected="false"
            data-bs-toggle="tab" 
            data-bs-target="#nav-profile">Profile</button>
            
    <button class="nav-link" id="nav-contact-tab" type="button"
            role="tab" aria-controls="nav-contact" aria-selected="false"
            data-bs-toggle="tab" 
            data-bs-target="#nav-contact" >Contact</button>
  </div>
</nav>
<div class="tab-content p-4 pt-0" id="nav-tabContent">

  <div class="tab-pane fade show active" id="nav-home" 
       role="tabpanel" aria-labelledby="nav-home-tab">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  </div>
       
  <div class="tab-pane fade" id="nav-profile" 
       role="tabpanel" aria-labelledby="nav-profile-tab">
       In dictum non consectetur a erat nam at. Sed turpis tincidunt id aliquet risus.
  </div>
  
  <div class="tab-pane fade" id="nav-contact" 
       role="tabpanel" aria-labelledby="nav-contact-tab">
       Posuere sollicitudin aliquam ultrices sagittis.
  </div>
</div>