Removing a class from an element when other element is being clicked

Question

I have a sticky navbar that contains 4 divs with class .menu-container. Each one of these divs contains an image, a text and a div with classes .rectangle and .hidden. Basically, my goal is to remove the class .hidden when a specific element of .menu-container is being clicked. I tried different ways to remove the class. One of them was to add rectangle[el].classList.remove('hidden') but I get undefined and strangely the rectangle appears in the browser, but when I check in the console I get this error 'Uncaught'. Here's the code to make it clear:

 "use strict"; const rectangle = document.querySelectorAll(".rectangle"); window.addEventListener('DOMContentLoaded', event => { document.querySelectorAll('.menu-container').forEach(el => el.addEventListener('click', event => { rectangle.classList.remove('hidden'); console.log('clicked'); } ) ) })

 .sticky { display: flex; justify-content: center; flex-shrink: 1; min-height: 70px; padding: 0 287px 0; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.22); background-color: $light--black; // align-items: center; // align-items: stretch; .menu-container { display: inline-flex; flex-direction: column; align-items: center; &:hover { .text-sticky { color: white; } .icon-coffee--grey { display: none; } .icon-coffee--white { display: block; } .icon-capsules--grey { display: none; } .icon-capsules--white { display: block; } .icon-mousse--grey { display: none; } .icon-mousse--white { display: block; } .icon-machines--grey { display: none; } .icon-machines--white { display: block; } } @include between(1, 3) { position: relative; &::after { content: ""; position: absolute; width: 0.5px; right: -3px; min-height: 41px; background-color: $white; top: 50%; transform: translate(-50%, -50%); } } .icon-coffee { width: 44px; height: 18px; // margin: 7px 76px 5px 77px; margin: 18px 77px 5px; } .icon-coffee--white { display: none; } .icon-capsules { width: 49px; height: 14px; // margin: 8px 72px 8px 75px; margin: 19px 74px 8px; } .icon-capsules--white { display: none; } .icon-mousse { width: 25px; height: 24px; margin: 13px 86px 4px; } .icon-mousse--white { display: none; } .icon-machines { width: 15px; height: 26px; margin: 11px 91px 4px; } .icon-machines--white { display: none; } .text-sticky { font-size: 12px; min-height: 16px; font-family: "NespressoLucas-SemiBd"; margin: 0 0 9px 0; line-height: 1.33; letter-spacing: 0.34px; text-transform: uppercase; color: grey; text-align: center; } .rectangle { width: 100%; height: 4px; background-color: $brown; } .hidden { display: none; } } }

 ... <div class="sticky"> <div class="menu-container"> <a class="coffee-icon" href=""> <img class="icon-coffee icon-coffee--grey" src="assets/icon-coffee-grey.svg" alt=""> <img class="icon-coffee icon-coffee--white" src="assets/icon-coffee-white.svg" alt=""> </a> <p class="text-sticky">les cafés</p> <div class="rectangle hidden"></div> </div> <div class="menu-container"> <a class="capsules-icon" href=""> <img class="icon-capsules icon-capsules--grey" src="assets/icon-capsules-grey.svg" alt=""> <img class="icon-capsules icon-capsules--white" src="assets/icon-capsules-white.svg" alt=""> </a> <p class="text-sticky">les capsules</p> <div class="rectangle hidden"></div> </div> <div class="menu-container"> <a class="mousse-icon" href=""> <img class="icon-mousse icon-mousse--grey" src="assets/icon-mousse-grey.svg" alt=""> <img class="icon-mousse icon-mousse--white" src="assets/icon-mousse-white.svg" alt=""> </a> <p class="text-sticky">les technologies</p> <div class="rectangle hidden"></div> </div> <div class="menu-container"> <a class="machines-icon" href=""> <img class="icon-machines icon-machines--grey" src="assets/icon-machines-grey.svg" alt=""> <img class="icon-machines icon-machines--white" src="assets/icon-machines-white.svg" alt=""> </a> <p class="text-sticky">les machines</p> <div class="rectangle hidden"></div> </div> </div> <script src="script.js"></script> </body> </html>

Answer 1

Using jQuery the next should work. ✌️

Specific code:

$('.menu-container').click(function() {
    $(this).find('.hidden').removeClass('hidden');
});

We check what element has been clicked with the click function. The $(this) refers to that specific element that has been clicked. Then we gonna look for the class hidden, .find('.hidden') and remove it. 🥳

Run code snippet:

 $('.menu-container').click(function() { $(this).find('.hidden').removeClass('hidden'); });

 .sticky { display: flex; justify-content: center; flex-shrink: 1; min-height: 70px; padding: 0 287px 0; box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.22); background-color: $light--black; // align-items: center; // align-items: stretch; .menu-container { display: inline-flex; flex-direction: column; align-items: center; &:hover { .text-sticky { color: white; } .icon-coffee--grey { display: none; } .icon-coffee--white { display: block; } .icon-capsules--grey { display: none; } .icon-capsules--white { display: block; } .icon-mousse--grey { display: none; } .icon-mousse--white { display: block; } .icon-machines--grey { display: none; } .icon-machines--white { display: block; } } @include between(1, 3) { position: relative; &::after { content: ""; position: absolute; width: 0.5px; right: -3px; min-height: 41px; background-color: $white; top: 50%; transform: translate(-50%, -50%); } } .icon-coffee { width: 44px; height: 18px; // margin: 7px 76px 5px 77px; margin: 18px 77px 5px; } .icon-coffee--white { display: none; } .icon-capsules { width: 49px; height: 14px; // margin: 8px 72px 8px 75px; margin: 19px 74px 8px; } .icon-capsules--white { display: none; } .icon-mousse { width: 25px; height: 24px; margin: 13px 86px 4px; } .icon-mousse--white { display: none; } .icon-machines { width: 15px; height: 26px; margin: 11px 91px 4px; } .icon-machines--white { display: none; } .text-sticky { font-size: 12px; min-height: 16px; font-family: "NespressoLucas-SemiBd"; margin: 0 0 9px 0; line-height: 1.33; letter-spacing: 0.34px; text-transform: uppercase; color: grey; text-align: center; } .rectangle { width: 100%; height: 4px; background-color: $brown; } .hidden { display: none; } } } .hidden { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> ... <div class="sticky"> <div class="menu-container"> <a class="coffee-icon" href=""> <img class="icon-coffee icon-coffee--grey" src="assets/icon-coffee-grey.svg" alt=""> <img class="icon-coffee icon-coffee--white" src="assets/icon-coffee-white.svg" alt=""> </a> <p class="text-sticky">les cafés</p> <div class="rectangle hidden">test</div> </div> <div class="menu-container"> <a class="capsules-icon" href=""> <img class="icon-capsules icon-capsules--grey" src="assets/icon-capsules-grey.svg" alt=""> <img class="icon-capsules icon-capsules--white" src="assets/icon-capsules-white.svg" alt=""> </a> <p class="text-sticky">les capsules</p> <div class="rectangle hidden">test</div> </div> <div class="menu-container"> <a class="mousse-icon" href=""> <img class="icon-mousse icon-mousse--grey" src="assets/icon-mousse-grey.svg" alt=""> <img class="icon-mousse icon-mousse--white" src="assets/icon-mousse-white.svg" alt=""> </a> <p class="text-sticky">les technologies</p> <div class="rectangle hidden">test</div> </div> <div class="menu-container"> <a class="machines-icon" href=""> <img class="icon-machines icon-machines--grey" src="assets/icon-machines-grey.svg" alt=""> <img class="icon-machines icon-machines--white" src="assets/icon-machines-white.svg" alt=""> </a> <p class="text-sticky">les machines</p> <div class="rectangle hidden">test</div> </div> </div> <script src="script.js"></script> </body> </html>