How can I remove class when click the same button

r1c04111995 0
Viewed 50

Please see code below:

const sectionIcon = document.querySelectorAll(".nk-section-icons")
const sectionContainer = document.querySelectorAll(".nk-sec-container")
const sectionIconHover = document.querySelectorAll(".nk-section-icons")
sectionIcon.forEach((sectionBtn)=> {
    sectionBtn.addEventListener("click", (btns)=> {

        // console.log(sectionIconHover)
        const containerTarget = btns.currentTarget.parentElement.children[1]
        const containerHoverTarget = btns.currentTarget.parentElement.children[0]

        sectionContainer.forEach(items => {
            if(items !== containerTarget) {
                items.classList.remove("show")
                // itemHover.classList.remove("rb")
            }
        })

        sectionIconHover.forEach(itemHover => {
            if(itemHover !== containerHoverTarget) {
                itemHover.classList.remove("rb")
            }
        })

        containerTarget.classList.toggle("show")
        containerHoverTarget.classList.add("rb")
    })
})
.nk-section-icons {
    height: 30px;
    min-width: 30px;
    width: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 3px;
    background: yellow;
    margin-bottom: 5px;
}

.nk-section-icons.rb {
    background: black;
}

.nk-sec-container {
    width: 300px;
    min-width: 300px;
    height: 100%;
    background: red;
    position: absolute;
    z-index: 11;
    box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
    border-radius: 6px;
    left: 70px;
    top: 0px;

}

.nk-sec-container.show {
    background: green;
}

.nk-section-icons-container {
    position: relative;
}
<div class="nk-section-l-icons">
                <div class="nk-section-icons-container">
                    <div class="nk-section-icons fav"  data-title="Favorites">btn</div>
                    <div class="nk-sec-container nk-sec-fav-c">

                    </div>
                </div>
                <div class="nk-section-icons-container">
                    <div class="nk-section-icons recent"  data-title="Recent">btn</div>
                    <div class="nk-sec-container nk-sec-recent-c">
                        
                    </div>
                </div>
                <div class="nk-section-icons-container">
                    <div class="nk-section-icons notifs" data-title="Notifications">btn</div>
                    <div class="nk-sec-container nk-sec-notif-c">
                        
                    </div>
                </div>
            </div>

Hello guys, can you please see my code? Currently, it's working fine when I click the button it's working the classes are moved when I click any of the buttons. However, if I tried clicking the same button again the class rb is not removed but the show class is removed. Can you please help me with how can I fix this? Thanks

jquery javascript css html
1 Answers
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    if($("p").hasClass("main"))
    {
      $("p").toggleClass("main1");
    }
    else
    {
      $("p").toggleClass("main");
    }
  });
});
</script>
<style>
.main {
  font-size: 120%;
  color: red;
}
.main1 {
  font-size: 120%;
  color: green;
}
</style>
</head>
<body>

<button>Toggle class "main" for p elements</button>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p><b>Note:</b> Click the button more than once to see the toggle effect.</p>

</body>
</html>

Use toggling: Toggle between adding and removing the "main" class name for all

elements

The toggleClass() method toggles between adding and removing one or more class names from the selected elements.

ND's0
Related