I have a pair of buttons, #btn1 and #btn2, as well as two table rows, #tr1 and #tr2. The goal is to toggle the active state of the buttons when they are clicked by the user.
The specific requirements are:
- When the button is set to
active, the elements within the correspondingtrshould be displayed. - Conversely, when the button is marked as
inactive, the elements in the respectivetrmust be hidden.
How can this functionality be achieved?
JQuery script for activating the buttons:
$("#btn1").click(function () {
$(this).toggleClass("buttonActive");
});
$("#btn2").click(function () {
$(this).toggleClass("buttonActive");
});
HTML code snippet:
<tr id="tr1">
<td><input type="text" name="val1" id="val1"/></td>
<td><input type="text" name="val2" id="val2"/></td>
</tr>
<tr id="tr2">
<td>
<input type="text" name="val3" id="val3"/>
</td>
</tr>
Now, the objective is to hide tr1 if btn1 is not active and display it only when btn1 is active; the same logic applies to btn2.