Показывать только текущий выборочный div и скрывать другие div, используя jquery

Question

У меня есть два div [один верхний | второй ниже]. Оба могут извлечь данные из базы данных и сделать соответственно количество делений. нижний div по умолчанию скрыт. Я хочу показать нижний div, когда я нажимаю верхний div. jquery код, который я делаю, здесь. Нужна ваша помощь. Запись. Показать только текущий активный нижний div. Все остальные нижние делители должны быть скрыты. Для этого

<!---upper div section--->  
                <?php
                $id=1;
                while ($comp_post_info=mysqli_fetch_array($query)) 
                    {
                    ?>
            <div class="container-fluid">
                <div class="row">
                    <div class="upperdiv container-fluid mb-5">
                        <div class="row">
                            <div class="col-md-1 pdl-3">
                                <i class="fa fa-circle"></i>
                            </div>
                            <div class="col-md-11">
                                <div class="container-fluid">
                                    <div class="row jlist" id="addbg">
                                        <div class="col-md-4">
                                            <img src="/my_brands/brand.png" alt="" class="cust-em">
                                            <h6><?php echo $comp_post_info['title'] ?> <p><small><?php echo $comp_post_info['c_name'] ?></small></p></h6>       
                                        </div>
                                        <div class="col-md-4">
                                            <h6>
                                                <?php echo $comp_post_info['state'] ?>,<?php echo $comp_post_info['coun'] ?> 
                                                <p><small>Location</small></p>
                                            </h6>   
                                        </div>
                                        <div class="col-md-4">
                                            <h6>
                                                <?php echo $comp_post_info['saly'] ?> 
                                                <p><small> Saly</small></p>
                                            </h6>       
                                        </div>
                                    </div>
                                </div>  
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!----lowerdiv--->
            <div class="lowerdiv container-fluid  hideme" id="mydiv" >
                <div class="row pt-4 padl-5">
                    <h6>Other Prepositions <small>for gle</small></h6>
                </div>
                <div class="row">

                    <div class="col-md-11 offset-md-1">
                        <div class="container-fluid">
                            <div class="row sub_lowerdiv pt-2">
                                <div class="col-md-4">
                                    <i class="fa fa-circle"></i>
                                    <h6><?php echo $comp_post_info['title'] ?> <p><small><?php echo $comp_post_info['c_name'] ?></small></p></h6>       
                                </div>
                                <div class="col-md-4">
                                    <h6>
                                        <?php echo $comp_post_info['state'] ?>,<?php echo $comp_post_info['count'] ?> 
                                        <p><small>Location</small></p>
                                    </h6>   
                                </div>
                                <div class="col-md-4">
                                    <h6>
                                        <?php echo $comp_post_info['saly'] ?> 
                                        <p><small>Saly</small></p>
                                    </h6>       
                                </div>
                            </div>
                        </div>  
                    </div>
                </div>
            </div>
            <?php
                }
            ?>      

** <script> 
        $(document).ready(function(){                           
        $(".upperdiv").on("click",function(){
            var currentselect = $(this).('.lowerdiv');
          $(".lowerdiv").not(currentselect).hide();
          currentselect.show();
            });
        });


</script> **

введите код

Answer 1

Используйте closest, чтобы найти родителя (я добавил родительский класс .parent-div), а затем используйте nextAll, чтобы найти первый lowerdiv.

См. Фрагмент ниже:

$(document).ready(function(){                           
    $(".upperdiv").on("click",function(){
        var currentselect = $(this).closest(".parent-div").nextAll('.lowerdiv').first(); /* Look I've added find */
        $(".lowerdiv").not(currentselect).hide();
        currentselect.show();
    });
});

.lowerdiv{
  display: none;
  margin-left: 15px;
}

.upperdiv{
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="parent-div container-fluid">
  <div class="row">
    <div class="upperdiv">
      Upper 1
    </div>
  </div>
</div>
<div class="lowerdiv">
  Lower 1
</div>
  
<div class="parent-div container-fluid">
  <div class="row">
    <div class="upperdiv">
      Upper 2
    </div>
  </div>
</div>

<div class="lowerdiv">
  Lower 2
</div>
  
<div class="parent-div container-fluid">
  <div class="row">
    <div class="upperdiv">
      Upper 3
    </div>
  </div>
</div>

  <div class="lowerdiv">
     Lower 3
  </div>