HTML/JQuery: Disable span / button click (greying it out and disable click)

Question

I have two spans that display certain information upon click, and I was unsure how I can grey out the spans to look like a disabled button when the other one is clicked. My code is below. I thought I could do something like $("#toggle-odd").attr("disabled", true") or $("toggle-odd").unbind("click") but neither seemed to give me the desired result.

 $("document").ready(function(){ $("#odd").hide(); $("#even").hide(); }); $("#toggle-odd").click(function(){ $("#even").hide(); $("#odd").toggle(); }); $("#toggle-even").click(function(){ $("#odd").hide(); $("#even").toggle(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- CSS only --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <span class="btn btn-contrast" style="background-color: green" href="#" id="toggle-odd"> Show Odd Objects </span> <span class="btn btn-contrast" style="background-color: red" href="#" id="toggle-even"> Show Even Objects </span> <p id="odd"> Odd </p> <p id="even"> Even </p>

Answer 1

The span tag is made to display text. Here you should use buttons. If you want to disable the other button "graphically", just add a class ( I named it disabled ). If you want to really disable it, add $("#your-button").attr("disabled","disabled");

In the following example I made sure that we can reactivate a button but if you want to keep it deactivated, you just have to extract the code of the first condition.

 $("document").ready(function(){ $("#odd").hide(); $("#even").hide(); }); $("#toggle-odd").click(function(){ if($("#odd").css("display") == "none"){ $("#toggle-even").attr("disabled","disabled"); $("#toggle-even").addClass("disabled"); }else{ $("#toggle-even").removeAttr("disabled"); $("#toggle-even").removeClass("disabled"); } $("#even").hide(); $("#odd").toggle(); }); $("#toggle-even").click(function(){ if($("#even").css("display") == "none"){ $("#toggle-odd").attr("disabled","disabled"); $("#toggle-odd").addClass("disabled"); }else{ $("#toggle-odd").removeAttr("disabled"); $("#toggle-odd").removeClass("disabled"); } $("#odd").hide(); $("#even").toggle(); });

 .disabled{ background-color: grey; } #toggle-odd{ background-color: green } #toggle-even{ background-color: red }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- CSS only --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <button class="btn btn-contrast" id="toggle-odd"> Show Odd Objects </button> <button class="btn btn-contrast" id="toggle-even"> Show Even Objects </button> <p id="odd"> Odd </p> <p id="even"> Even </p>