How to add class to div having same name on button click

Question

I want to add a class to a div on a button click, I have the below code, but I cannot get the jquery working correctly:

$(document).ready(function()
    {
        $('.edit-btn').click(function()
        {
            $(this).closest('.edit-box').addClass('open');
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col account">
  <strong>Account Settings</strong>
  <div class="col">
    <span>Profile Status</span>
    <p>status</p>
    <div class="flex-btn front-btn">
    
    <button class="edit-btn">edit</button>
</div>
    <div class="edit-box">
      edit 1
    </div>
  </div>
  <div class="col">
    <span>Name</span>
    <p> name</p>
    <div class="flex-btn front-btn">
    
    <button class="edit-btn">edit</button>
</div>
    <div class="edit-box">
      edit 2
    </div>
  </div>
  <div class="col">
    <span>Username</span> 
    <p>username</p>
    <div class="flex-btn front-btn">
    
    <button class="edit-btn">edit</button>
</div>
    <div class="edit-box">
      edit 3
    </div>
  </div>
  <div class="col">
    <span>Bio</span>
    <p>bio</p>
    <div class="flex-btn front-btn">
    
    <button class="edit-btn">edit</button>
</div>
    <div class="edit-box">
      edit 4
    </div>
  </div>
</div>

Clicking on the button will add a class to div i.e .edit-box. So only on the clicked button will add class to relevant div.

FluffyKitten · Accepted Answer · 2020-07-25 02:10:45Z

This code adds the open class to the edit-box div that comes after the button that is clicked.

It works by finding the parent of the button (i.e. the flex-btn container div), then getting the next element that has the class edit-box.

To see it working below I've added a background colour to the .edit-box and .edit-box.open divs so you can see it changing when the button is clicked:

$(document).ready(function() {
  $('.edit-btn').click(function() {
    $(this).parent().next('.edit-box').addClass('open');
  });
});

.edit-box {
  background: #ccffff;
}

.edit-box.open {
  background: #ccccff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col account">
  <strong>Account Settings</strong>
  <div class="col">
    <span>Profile Status</span>
    <p>status</p>
    <div class="flex-btn front-btn">

      <button class="edit-btn">edit</button>
    </div>
    <div class="edit-box">
      edit 1
    </div>
  </div>
  <div class="col">
    <span>Name</span>
    <p> name</p>
    <div class="flex-btn front-btn">

      <button class="edit-btn">edit</button>
    </div>
    <div class="edit-box">
      edit 2
    </div>
  </div>
  <div class="col">
    <span>Username</span>
    <p>username</p>
    <div class="flex-btn front-btn">

      <button class="edit-btn">edit</button>
    </div>
    <div class="edit-box">
      edit 3
    </div>
  </div>
  <div class="col">
    <span>Bio</span>
    <p>bio</p>
    <div class="flex-btn front-btn">

      <button class="edit-btn">edit</button>
    </div>
    <div class="edit-box">
      edit 4
    </div>
  </div>
</div>

Evgeniy Kuznetsov · Accepted Answer · 2020-07-25 02:01:43Z

Do I understand you correctly?

$(document).ready(function()
    {
        $('.edit-btn').click(function()
        {
            //$('.edit-box').removeClass('open');
            $(this).closest('.col').find('.edit-box').addClass('open');
        });
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col account">
  <strong>Account Settings</strong>
  <div class="col">
    <span>Profile Status</span>
    <p>status</p>
    <div class="flex-btn front-btn">
    
    <button class="edit-btn">edit</button>
</div>
    <div class="edit-box">
      edit 1
    </div>
  </div>
  <div class="col">
    <span>Name</span>
    <p> name</p>
    <div class="flex-btn front-btn">
    
    <button class="edit-btn">edit</button>
</div>
    <div class="edit-box">
      edit 2
    </div>
  </div>
  <div class="col">
    <span>Username</span> 
    <p>username</p>
    <div class="flex-btn front-btn">
    
    <button class="edit-btn">edit</button>
</div>
    <div class="edit-box">
      edit 3
    </div>
  </div>
  <div class="col">
    <span>Bio</span>
    <p>bio</p>
    <div class="flex-btn front-btn">
    
    <button class="edit-btn">edit</button>
</div>
    <div class="edit-box">
      edit 4
    </div>
  </div>
</div>

Daniel · Accepted Answer · 2020-07-25 01:59:40Z

0

Personally, I would add this to all of the divs that wrap around the buttons:

onclick="this.nextElementSibling.classList.add('open');"

That's not what you asked though, so here is how to get your thing working (using vanilla javascript):

document.querySelectorAll('.edit-btn').forEach(button => {
            button.addEventListener("mouseup", () => {
                button.parentElement.nextElementSibling.classList.add("open")
            })
        })

answered Jul 25, 2020 at 1:59

Daniel

1,4701 gold badge7 silver badges19 bronze badges

1 Comment

Waleedviews Over a year ago

Yes I have try it with vanilla JS and it's working, but it should work with jQuery as well.

Collectives™ on Stack Overflow

How to add class to div having same name on button click

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related