0

I need to create a menu with 3 buttons that when clicked, it opens a div on the side of the menu. The 3 buttons open the same div. I was able to create this without a problem. The actual problem I have is when I want to hide the div. I only want to hide the div when you click on a button that has .open as a class, so I can't use .toggle()... Am I even doing this right?

Here's a JSFiddle: https://jsfiddle.net/5duh8v71/3/

$('.btn').click(function() {
  var obj = $(this);

  if ($('.btn').hasClass('open')) {
    $('.btn').removeClass('open');
  }

  if (obj.hasClass('open')) {
    obj.removeClass('open');
  } else {
    obj.addClass('open');
  }

  $(".hidden-content").show("slide");
});

//This is what I tought would solve my problem...     
$('.btn.open').click(function() {
  var obj = $(this);

  obj.removeClass('open');

  $(".hidden-content").hide("slide");
});
.container {
  display: flex;
}

.menu {
  width: 50%;
}

.btn {
  background-color: #1f2227;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
  color: #ffffff;
  cursor: pointer;
  &:hover {
    background-color: #0f1113;
  }
  &.open {
    background-color: #0f1113;
  }
}

.hidden-content {
  padding: 10px;
  border: 1px solid #0f1113;
  border-radius: 5px;
  width: 50%;
  margin: 5px;
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="menu">
    <div class="btn">CLICK</div>
    <div class="btn">CLICK</div>
    <div class="btn">CLICK</div>
  </div>
  <div class="hidden-content">
    <h1>Content</h1>
  </div>
</div>
Xavier Godbout
  • 33
  • 7
  • `$('.btn').removeClass('open');` removes the `open` class before you check `if (obj.hasClass('open'))`. So that check will never succeed. – Barmar Jul 16 '21 at 21:17

2 Answers2

1

You're removing the open class from all the buttons, so the if condition always fails. You should remove it from the buttons other than the one you clicked on.

The second click handler isn't necessary, just check the class after toggling in the first handle.

And if you do want to write an event handler when the classes change dynamically, you need to use event delegation. See jQuery click event not working after adding class

$('.btn').click(function() {
  var obj = $(this);

  $('.btn').not(obj).removeClass('open');
  obj.toggleClass("open");
  if (obj.hasClass("open")) {
    $('.hidden-content').show("slide");
  } else {
    $('.hidden-content').hide("slide");
  }
});
.container {
  display: flex;
}

.menu {
  width: 50%;
}

.btn {
  background-color: #1f2227;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
  color: #ffffff;
  cursor: pointer;
  &:hover {
    background-color: #0f1113;
  }
  &.open {
    background-color: #0f1113;
  }
}

.hidden-content {
  padding: 10px;
  border: 1px solid #0f1113;
  border-radius: 5px;
  width: 50%;
  margin: 5px;
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="menu">
    <div class="btn">CLICK</div>
    <div class="btn">CLICK</div>
    <div class="btn">CLICK</div>
  </div>
  <div class="hidden-content">
    <h1>Content</h1>
  </div>
</div>
Barmar
  • 741,623
  • 53
  • 500
  • 612
0

Since You are using JQuery you can simple achieve the same with proper use of toggle() method, as you click on any of the buttons with the below lines of code.

So, I am basically iterating over the buttons and toggling our side div. As simple as that. (JQuery internally takes care of our show/hide with toggle() functions).

const buttons = $(".menu .btn"); // selects all the buttons

buttons.each(function(){
  $(this).click(function(){
    console.log(this);
    $('.slider').toggle();
  })
});


const buttons = $(".menu .btn"); // selects all the buttons

buttons.each(function(){
  $(this).click(function(){
    console.log(this);
    $('.slider').toggle();
  })
})
.container {
    display: flex;
}

.menu {
  width: 50%;
}

.btn {
  background-color: #1f2227;
  padding: 10px;
  margin: 5px;
  border-radius: 5px;
  color: #ffffff;
  cursor: pointer;
  
  &:hover {
    background-color: #0f1113;
  }
  
  &.open {
    background-color: #0f1113;
  }
}

.slider{
  padding: 10px;
  border: 1px solid #0f1113;
  border-radius: 5px;
  width: 50%;
  margin: 5px;
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="container">
  <div class="menu">
      <div class="btn">CLICK 1</div>
      <div class="btn">CLICK 2</div>
      <div class="btn">CLICK 3</div>
  </div>
  <div class="slider">
      <h1>Content</h1>
  </div>
</div>
Imran Rafiq Rather
  • 7,677
  • 1
  • 16
  • 35