how to toggle between button display

user_18531097 0
Viewed 80

.b1, .b2, .b3{
    padding: 1rem;
    margin: .5rem;
    }
    .b1{
    background-color: green;
    color: white;
    }
    .b2{
    background-color: red;
    color: white;
    }
    .b3{
    background-color: yellow;
    color: white;
    }
    <button class="b1">Approve</button>
    <button class="b2">Deny</button>
    <button class="b3">Void</button>

I need a function whereby any button clicked makes the other two buttons display:none without being able to be displayed again even if that same button is clicked a second time.

Only .b3 when clicked twice should make other buttons reappear.

css html
4 Answers

You can try this in Jquery this way. Is this what you mean toggle the yellow only.

$(".b1").click(function(){
  $(".b2, .b3 ").hide()

});

$(".b2").click(function(){
  $(".b1, .b3 ").hide()

});
  
  $(".b3").click(function(){
  $(".b1, .b2 ").toggle()
 
}); 
.b1, .b2, .b3{
padding: 1rem;
margin: .5rem;
}
.b1{
background-color: green;
color: white;
}
.b2{
background-color: red;
color: white;
}
.b3{
background-color: yellow;
color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>


<button class="b1">Approve</button>
<button class="b2">Deny</button>
<button class="b3">Void</button>

user_165130010

Here is on click event handler for button.

const buttons = document.querySelectorAll("button");
buttons.forEach((el) => {
  el.addEventListener("click", function onClick(event) {
    buttons.forEach((btn) => {
      if (event.target.className !== btn.className) {
        btn.style.display =
          event.target.className === "b3" && btn.style.display === "none"
            ? "inline"
            : "none";
      }
    });
  });
});
.b1, .b2, .b3{
padding: 1rem;
margin: .5rem;
}
.b1{
background-color: green;
color: white;
}
.b2{
background-color: red;
color: white;
}
.b3{
background-color: yellow;
color: white;
}
<button class="b1">Approve</button>
<button class="b2">Deny</button>
<button class="b3">Void</button>

user_78994770

You can use the addEventListener javascript function to add interaction on button click. The onClick method will call the function hideButtons, the function is passed to an anonymous function to avoid the call on page load.

var clicked = false
var b1 = document.querySelector(".b1")
var b2 = document.querySelector(".b2")
var b3 = document.querySelector(".b3")

function hideButtons(button1, button2) {
    button1.style.display = (clicked ? "inline" : "none") 
    button2.style.display = (clicked ? "inline" : "none") 
    clicked = !clicked
}

b1.addEventListener("click", () => {hideButtons(b2, b3)})
b2.addEventListener("click", () => {hideButtons(b1, b3)})
b3.addEventListener("click", () => {hideButtons(b2, b1)})   
.b1, .b2, .b3{
  padding: 1rem;
  margin: .5rem;
}
.b1{
  background-color: green;
  color: white;
}
.b2{
  background-color: red;
  color: white;
}
.b3{
  background-color: yellow;
  color: white;
}
<button class="b1">Approve</button>
<button class="b2">Deny</button>
<button class="b3">Void</button>

user_176292790 

const buttons = document.getElementsByTagName("button");

for (button of buttons) {
    button.onclick =  clicked;
}

function clicked(event) {
  for (button of buttons) {
    button.style.display = "none";
  }
    event.target.style.display = "inline";
}
.b1, .b2, .b3{
padding: 1rem;
margin: .5rem;
}
.b1{
background-color: green;
color: white;
}
.b2{
background-color: red;
color: white;
}
.b3{
background-color: yellow;
color: white;
}
<button class="b1">Approve</button>
<button class="b2">Deny</button>
<button class="b3">Void</button>

Add the event listener to the buttons which will trigger when the button is clicked via button.onclick = functionName declaration. This function will hide all buttons, then show the one you clicked using the event.target property.

You can use this with more buttons as well if you need just by adding new buttons to the HTML.

user_57004460
Related