Jquery hide and show multiple elements same page-CodePudding

I am a beginner in Jquery and Js, I would like that when we press the plus and the minus it hides only the main element and the same with the first element. except that when I press the plus or minus button of the main element, it also show / hides the first element .I want to show and hide separately.

I ask for your help please

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css"/>
</head>
<body>



<section>
    <div >
        <table id="table" >
          <thead>
            <tr>
              <th>Main element</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <a href="#" >element1</a>
              </td>
            </tr>
            <tr>
              <td>
                <a href="#" >element2</a>
              </td>
            </tr>
            <tr>
              <td>
                <a href="#" >element3</a>
              </td>
            </tr>
            <tr>
              <td>
                <a href="#" >element4</a>
              </td>
            </tr>
            <tr>
              <td>
              <a class='clickable-more' href="#"><i ></i></a>
              <a class='clickable-minus' style="display: none" href="#"><i ></i></a>
                 </td>
            </tr>
            <tr >
              <td>
                <a href="#" >element5</a>
              </td>
            </tr>
            <tr >
              <td>
                <a href="#" >element6</a>
              </td>
            </tr>
            </tbody>
        </table>
        <table id="table" >
          <thead>
            <tr>
              <th>First element</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>
                <a href="#" >elementA</a>
              </td>
            </tr>
            <tr>
              <td>
                <a href="#" >elementB</a>
              </td>
            </tr>
            <tr>
              <td>
                <a href="#" >elementC</a>
              </td>
            </tr>
            <tr>
              <td>
                <a href="#" >elementD</a>
              </td>
            </tr>
            <tr>
              <td>
              <a class='clickable-more' href="#"><i ></i></a>
              <a class='clickable-minus' style="display: none" href="#"><i ></i></a>
                 </td>
            </tr>
            <tr >
              <td>
                <a href="#" >elementE</a>
              </td>
            </tr>
            <tr >
              <td>
                <a href="#" >elementF</a>
              </td>
            </tr>
            </tbody>
        </table>        
    </div>
    </body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
      jQuery(document).ready(function($) {
        $('.tr_more').hide();
        $(".clickable-more").on('click', function() {
          $(this).hide();
          $('.tr_more').show();
          $(this).next('a').show();
        });
        $(".clickable-minus").on('click', function() {
          $(this).hide();
          $('.tr_more').hide();
          $(this).prev('a').show();
        });
      });
    </script>

</html>

CodePudding user response：

The reason that the click hides all the tr_more elements is because in your code, you are hiding and showing all the elements with the class tr_more irrespective of which table it is. One approach would be to select the tr_more element which is part of the table which you are clicking by using the closest() to find the parent table and then using find() to get the tr_more elements of that particular table that is clicked. Try the below code.

<script>
jQuery(document).ready(function($) {
 $('.tr_more').hide();
 $(".clickable-more").on('click', function() {
  $(this).hide();
  $(this).closest('table').find('.tr_more').show();
  $(this).next('a').show();
 });
 $(".clickable-minus").on('click', function() {
  $(this).hide();
   $(this).closest('table').find('.tr_more').hide();
  $(this).prev('a').show();
 });
});
</script>

A better approach would be to use jquery toggleClass to toggle a class name for the tr_more elements and change the display property for that class name using css. Not the exact code below, but it's a start

.tr_more.show {
   display: block;
} 

$('.clickable-more').on('click', function() {
  $(this).closest('table').find('.tr_more').toggleClass('show');
})