how to toggle between button display

Issue

.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.

Solution

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>

Answered By – Crystal

Answer Checked By – Senaida (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.