Jquery Question posted in
The official Jquery Api Documentation can be found here.

Not Able to Toggle Classes in jQuery Condition Properly

Having two buttons with same class as

<button class="show-hide-sidebar">Cart</button>
<button class="show-hide-sidebar">Wish</button>

I am trying to show and hide a sidebar but I want to Keep it Open if the sidebar already Opened! this code works fine on each item separately but if I clicked on Cart btn and want to check Wish it is closing the sidebar

$(".show-hide-sidebar").on("click", function () {
    // Check if the sidebar is already visible (has the 'sidenav-show' class)
    if ($("#sidebar").hasClass('sidenav-show')) {
        // If sidebar is open, close it
        $("#sidebar").removeClass("sidenav-show").addClass("sidenav-hide");
        $("#mainbar").removeClass("main-narrow").addClass("main-wide");
    } else {
        // If sidebar is closed, open it
        $("#sidebar").removeClass("sidenav-hide").addClass("sidenav-show");
        $("#mainbar").removeClass("main-wide").addClass("main-narrow");
    }
});

    $(".show-hide-sidebar").on("click", function () {
        // Check if the sidebar is already visible (has the 'sidenav-show' class)
        if ($("#sidebar").hasClass('sidenav-show')) {
            // If sidebar is open, close it
            $("#sidebar").removeClass("sidenav-show").addClass("sidenav-hide");
            $("#mainbar").removeClass("main-narrow").addClass("main-wide");
        } else {
            // If sidebar is closed, open it
            $("#sidebar").removeClass("sidenav-hide").addClass("sidenav-show");
            $("#mainbar").removeClass("main-wide").addClass("main-narrow");
        }
    });
.box{
height:60px;
width:60px;

margin:20px
}

.sidenav-show{
background:red
}

.sidenav-hide{
background:gold
}

.main-narrow{
background:red
}

.main-wide{
background:gold
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>


<button class="show-hide-sidebar">Cart</button>
<button class="show-hide-sidebar">Wish</button>

<div class="box sidenav-show" id="sidebar"> </div>
<div class="box main-narrow" id="mainbar"> </div>
Tags:

2

Answers


  1. 0

    How I would do this is add a unique identifier to your buttons. Something like

    <button id="Cart" class="show-hide-sidebar">Cart</button>
<button id="Wish" class="show-hide-sidebar">Wish</button>

    Then add a variable to track the button clicked

    var btnClicked = '';

    split your click events and pull out the toggle

    $("#Cart").on("click", function () {
    if(btnClicked != 'Cart'){
        btnClicked = 'Cart';
        toggleSideBar();
    }
}
$("#Wish").on("click", function () {
    if(btnClicked != 'Wish'){
        btnClicked = 'Wish';
        toggleSideBar();
    }
}

    then your toggle method being the rest

    function toggleSideBar(){
    // Check if the sidebar is already visible (has the 'sidenav-show' class)
    if ($("#sidebar").hasClass('sidenav-show')) {
        // If sidebar is open, close it
        $("#sidebar").removeClass("sidenav-show").addClass("sidenav-hide");
        $("#mainbar").removeClass("main-narrow").addClass("main-wide");
    } else {
        // If sidebar is closed, open it
        $("#sidebar").removeClass("sidenav-hide").addClass("sidenav-show");
        $("#mainbar").removeClass("main-wide").addClass("main-narrow");
    }
}
    Login or Signup to reply.
  2. 0

    You can use the toggleClass jQuery method, and provide the second argument to it (a boolean). We can use a boolean that would be true if you clicked the first button, and false if you clicked the second one. To make this happen, it will be easier if you give your two buttons an id attribute:

    $(".show-hide-sidebar").on("click", function () {
    const openIt = this.id === "cart";
    $("#sidebar").toggleClass("sidenav-show", !openIt)
                 .toggleClass("sidenav-hide", openIt);
    $("#mainbar").toggleClass("main-narrow", !openIt)
                 .toggleClass("main-wide", openIt);
});
    .box {height:60px; width:60px; margin:20px}
.sidenav-show, .main-narrow {background:red}
.sidenav-hide, .main-wide {background:gold}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<button class="show-hide-sidebar" id="cart">Cart</button>
<button class="show-hide-sidebar" id="wish">Wish</button>

<div class="box sidenav-show" id="sidebar"> </div>
<div class="box main-narrow" id="mainbar"> </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search