Note that there are some explanatory texts on larger screens.

plurals
  1. POMultiple buttons switch
    text
    copied!<p>I want to remove the style for the box which is .widget when I click the button which is .edit-one-button. I have six boxes and six buttons. When I was trying to use the javascript below. Clicking one button will remove the style for all boxes. What should I do so that it only affects the box the button resides in when I click it?</p> <pre><code> &lt;script type="text/javascript"&gt; var divheight; $(".edit-one-button").click(function () { var btnname = $(this).val(); if (btnname == 'Edit') { divheight = $('.widget').attr('style'); $('.widget').removeAttr('style'); $(this).nextUntil('.edit-one-button').toggle(); } else { $(this).nextUntil('.edit-one-button').toggle(); $('.widget').attr('style', divheight); } }); &lt;/script&gt; </code></pre> <p>HTML:</p> <pre><code> &lt;div class="eq-height2 widget&gt; &lt;header&gt; &lt;h2&gt;Contact1&lt;/h2&gt; &lt;/header&gt; &lt;input type="submit" value="Edit" class="edit-one-button/&gt; &lt;fieldset id="Fieldset1"&gt; blabla &lt;/fieldset&gt; &lt;fieldset id="Fieldset2"&gt; blabla &lt;/fieldset&gt; &lt;/div&gt; &lt;div class="eq-height2 widget&gt; &lt;header&gt; &lt;h2&gt;Contact2&lt;/h2&gt; &lt;/header&gt; &lt;input type="submit" value="Edit" class="edit-one-button/&gt; &lt;fieldset id="Fieldset3"&gt; blabla &lt;/fieldset&gt; &lt;fieldset id="Fieldset4"&gt; blabla &lt;/fieldset&gt; &lt;/div&gt; &lt;div class="eq-height2 widget&gt; &lt;header&gt; &lt;h2&gt;Contact3&lt;/h2&gt; &lt;/header&gt; &lt;input type="submit" value="Edit" class="edit-one-button/&gt; &lt;fieldset id="Fieldset5"&gt; blabla &lt;/fieldset&gt; &lt;fieldset id="Fieldset6"&gt; blabla &lt;/fieldset&gt; &lt;/div&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload