Add CSS dynamically to non-sibling div using JavaScript/jQuery?

Question

I have this code, I want to add the display property to div when test() function fired. I call the function many times in the same file and want it to work for each button individually.

At the moment, if I click on any button it adds the CSS to first inline-data div, not the one I clicked for. What do I need to change so that it works for the inline-data that matches with the button?

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> 

  <style>
    .inline-data {
      display: none;
    }
  </style>
</head>
<body>
  <table>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button onclick="test()">Click</button></td>      
    </tr>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button onclick="test()">Click</button></td>      
    </tr>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button onclick="test()">Click</button></td>      
    </tr>
  </table>

  <script>
    function test() {
      document.querySelector(".inline-data").style.display = "flex";
    }
    
  </script>
</body>
</html>

in jquery you can dynamically add css like this $(".inline-data").css('display', 'flex');. — s.kuznetsov
– s.kuznetsov, Commented Aug 16, 2020 at 13:55
So you want each button add flex to its individual inline-data element? — AndrewL64
– AndrewL64, Commented Aug 16, 2020 at 13:59
If you need to undo this it would be easier to toggle a class instead and use css rule(s) in that class — charlietfl
– charlietfl, Commented Aug 16, 2020 at 14:04
@AndrewL64 Yes, you are right. But how can I do it without adding any extra classes? — PK Kulhari
– PK Kulhari, Commented Aug 16, 2020 at 14:06

FluffyKitten · Accepted Answer · 2020-08-16 14:13:07Z

To do this in the test() function, you would need to pass in which button is clicked, and do something similar to below.

Instead you can di ut all in one single function - remove the onClick from each button and this function will trigger on all button clicks:

$( "button" ).click(function() {
  $(this).closest("tr").find("div.inline-data").css("display", "flex");
});

This finds the tr ancestor of the button that was clicked and then looks for child/grandchild elements with the inline-data. When it finds them, it adds your CSS.

Note - if you don't want this to work for some buttons, you van give those buttons a class and then select that class in the selector e.g. $( "button.myclass" ).click(...

Working Snippet

$( "button" ).click(function() {
      $(this).closest("tr").find("div.inline-data").css("display", "flex");
});

.inline-data {
      display: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button>Click</button></td>      
    </tr>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button>Click</button></td>      
    </tr>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button>Click</button></td>      
    </tr>
  </table>

Working Snippet with test() function

If you need it to work with the existing HTML and the test function, you can doe it this way:

function test(clicked_button) {
      $(clicked_button).closest("tr").find("div.inline-data").css("display", "flex");
    }

.inline-data {
      display: none;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button onclick="test(this)">Click</button></td>      
    </tr>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button onclick="test(this)">Click</button></td>      
    </tr>
    <tr>
      <td>data 1</td>
      <td>
        <span>data 2</span>
        <div class="inline-data">
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
          <p>Lorem ipsum dolor sit amet.</p>
        </div>
      </td>
      <td><button onclick="test(this)">Click</button></td>      
    </tr>
  </table>

Collectives™ on Stack Overflow

Add CSS dynamically to non-sibling div using JavaScript/jQuery?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related