Add additional class click

Question

I get this class "ind open1" for example and I want to add an additional class to the panel class for exactly those blocks that have the class ""

for example , i click ind open0 and the panel add class panel current but if class has then remove

<div class="ind open0" onclick="someFunction(this)">
   <div class="panel"></div>
</div>
<div class="ind open0" onclick="someFunction(this)">
   <div class="panel"></div>
</div>
<div class="ind open1" onclick="someFunction(this)">
   <div class="panel"></div>
</div>
<div class="ind open1" onclick="someFunction(this)">
   <div class="panel"></div>
</div>
<div class="ind open2" onclick="someFunction(this)">
   <div class="panel"></div>
</div>
<div class="ind open2" onclick="someFunction(this)">
   <div class="panel"></div>
</div>

function someFunction(obj) {
        alert($(obj).attr('class'));  //ind open1
    }

I want this result if i click ind open0 class

 <div class="ind open0" onclick="someFunction(this)">
       <div class="panel current"></div>
    </div>
    <div class="ind open0" onclick="someFunction(this)">
       <div class="panel current"></div>
    </div>


   <div class="ind open1" onclick="someFunction(this)">
   <div class="panel"></div>
</div>
<div class="ind open1" onclick="someFunction(this)">
   <div class="panel"></div>
</div>
<div class="ind open2" onclick="someFunction(this)">
   <div class="panel"></div>
</div>
<div class="ind open2" onclick="someFunction(this)">
   <div class="panel"></div>
</div>

if i click ind open1 class

<div class="ind open0" onclick="someFunction(this)">
   <div class="panel"></div>
</div>
<div class="ind open0" onclick="someFunction(this)">
   <div class="panel"></div>
</div>
enter code here
<div class="ind open1" onclick="someFunction(this)">
       <div class="panel current"></div>
    </div>
    <div class="ind open1" onclick="someFunction(this)">
       <div class="panel current"></div>
    </div>
    <div class="ind open2" onclick="someFunction(this)">
   <div class="panel"></div>
</div>
<div class="ind open2" onclick="someFunction(this)">
   <div class="panel"></div>
</div>

Are you looking for this => $(".panel").toggleClass("current"); — Karan Singh
– Karan Singh, Commented Jun 25, 2020 at 19:04
Does this answer your question? jQuery onclick toggle class name — Karan Singh
– Karan Singh, Commented Jun 25, 2020 at 19:05
@KaranSingh not really. I need one more class to be added by clicking on open0 to the panel class, for example, and this should happen in all open0 containers — Nikita Kurilovic
– Nikita Kurilovic, Commented Jun 25, 2020 at 19:10

Cory Crowley · Accepted Answer · 2020-06-25 19:25:10Z

2

Check out this codepen:

https://codepen.io/CrowlsYung/pen/f4d8505f7b6e9cdf98f29118ba900f94?editors=1111

HTML

<div class="ind open0" onclick="someFunction(event)">
   <div class="panel">abc</div>
</div>
<div class="ind open0" onclick="someFunction(event)">
   <div class="panel">def</div>
</div>
<div class="ind open1" onclick="someFunction(event)">
   <div class="panel">ghi</div>
</div>
<div class="ind open1" onclick="someFunction(event)">
   <div class="panel">jkl</div>
</div>
<div class="ind open2" onclick="someFunction(event)">
   <div class="panel">mno</div>
</div>
<div class="ind open2" onclick="someFunction(event)">
   <div class="panel">pqr</div>
</div>

CSS

.current{
  background-color: red;
  height:100px;
}

JS

function someFunction(event){
 let classList = event.currentTarget.classList.toString();
 let targetClass = classList.toString().slice(classList.indexOf('open'));
  
  let toOpen = document.getElementsByClassName(targetClass);
  for(let el of toOpen){
    let childPanels = el.querySelectorAll('.panel');
    childPanels.forEach(child => {
      child.classList.toggle('current')
    })
   }
}

edited Jun 25, 2020 at 19:25

answered Jun 25, 2020 at 19:04

Cory Crowley

3242 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nikita Kurilovic Over a year ago

not quite right ... if I clicked on open0 then the second one where open0 the panel should have an additional class. there are two classes open0 therefore, both "panels" should have an additional class, and in your example this happens only for one

Cory Crowley Over a year ago

I updated the codepen! codepen.io/CrowlsYung/pen/… this should work : 0

Collectives™ on Stack Overflow

Add additional class click

1 Answer 1

HTML

CSS

JS

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

HTML

CSS

JS

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related