how to toggle between button display-CodePudding

.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 >Approve</button>
    <button >Deny</button>
    <button >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.

CodePudding user response：

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 >Approve</button>
<button >Deny</button>
<button >Void</button>

CodePudding user response：

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 >Approve</button>
<button >Deny</button>
<button >Void</button>

CodePudding user response：

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 >Approve</button>
<button >Deny</button>
<button >Void</button>

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.

CodePudding user response：

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 >Approve</button>
<button >Deny</button>
<button >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.