Creating a button to add multiple classes to multiple buttons and remove them when clicking on reset

user_9899182 0
Viewed 101

I have 10 different buttons each have a common class and a unique class.

<button type="button" class="topic btn1" data-target="desc1">Safety</button>
<button type="button" class="topic btn2" data-target="desc2">Environment</button>
<button type="button" class="topic btn3" data-target="desc3">Climate change</button>
<button type="button" class="topic btn4" data-target="desc4">Sustainability</button>
<button type="button" class="topic btn5" data-target="desc5">Business strategy</button>
<button type="button" class="topic btn6" data-target="desc6">Performance data</button>
<button type="button" class="topic btn7" data-target="desc7">Working for Shell</button>
<button type="button" class="topic btn8" data-target="desc8">Working together</button>
<button type="button" class="topic btn9" data-target="desc9">Social performance</button>
<button type="button" class="topic btn10" data-target="desc10">Human rights</button>

A function is applied on that which will add one extra unique class to each button.

for (let i = 0; i <= 12; i++) {
  $( ".btn" + i ).click(function() {
    $( this ).toggleClass( "act-btn" + i );
  });
}

Now i want to create two buttons:-

  1. Show All: When some one click on this, third unique class act-btn1 to act-btn10 will be added in the same order.
  2. Reset: When someone click on that reset button, only the extra added class will be removed, rest will be same.
jquery javascript
1 Answers

$('.add').click(function() {
  for (let i = 1; i <= 10; i++) {
    $('.btn' + i).addClass( "act-btn" + i);
  }
});

$('.remove').click(function() {
  for (let i = 1; i <= 10; i++) {
    $('.btn' + i).removeClass( "act-btn" + i);
  }
});
<button class="add">Add class</button> 
<button class="remove">remove class</button>

user_102895170
Related