Скрыть / показать div при нажатии другого DIV

Question

В моем foreach l oop я хотел бы показать остальные 4 элемента текущего поля, когда щелкает первый Div, в нем должны отображаться остальные 4 поля (DIV), которые принадлежат этому значению.

 @foreach ( $reled as $rele )
                <div id="MainD">
                <div class="" id="myDIV">
                    <div id="MainD">{{ $rele->customer_name }}</div>
                </div>
                </div>
                <div style="display: none;" id="ShowD">
                <div class="field-item">
                    <div>{{ $rele->customer_name }}</div>
                    <span class="text-muted text-xs">Full Name</span>
                </div>
                <div class="field-item">
                    <div>{{ $rele->amount_word }}</div>
                    <span class="text-muted text-xs">Amount in Words</span>
                </div>
                <div class="field-item">
                    <div>{{ $rele->amount_numb }}</div>
                    <span class="text-muted text-xs">Amount in Numbers</span>
                </div>
                <div class="field-item">
                    <div>{{ $rele->customer_address }}</div>
                    <span class="text-muted text-xs">Customer Address</span>
                </div>
                <div class="field-item">
                    <div>{{ $rele->date_accident }}</div>
                    <span class="text-muted text-xs">Date of Accident</span>
                </div>
                </div>
                @endforeach

Пожалуйста, помогите мне, я пытаюсь JQuery переключиться, но это не работает, Пожалуйста, дайте мне знать, если есть лучший способ сделать это.

Мой JQuery Код:

$(document).ready(function() {
    $('.MainD').on('click', function(){
        $('.ShowD').toggle();
    });
});

Answer 1

Вы вызываете селектор класса, когда ваши элементы имеют атрибуты ID.

См. Пример.

$(document).ready(function() {
  $('#MainD').on('click', function() {
    $('#ShowD').toggle();
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="MainD">
  <div class="" id="myDIV">
    <div id="MainD">{{ $rele->customer_name }}</div>
  </div>
</div>
<div style="display: none;" id="ShowD">
  <div class="field-item">
    <div>{{ $rele->customer_name }}</div>
    <span class="text-muted text-xs">Full Name</span>
  </div>
  <div class="field-item">
    <div>{{ $rele->amount_word }}</div>
    <span class="text-muted text-xs">Amount in Words</span>
  </div>
  <div class="field-item">
    <div>{{ $rele->amount_numb }}</div>
    <span class="text-muted text-xs">Amount in Numbers</span>
  </div>
  <div class="field-item">
    <div>{{ $rele->customer_address }}</div>
    <span class="text-muted text-xs">Customer Address</span>
  </div>
  <div class="field-item">
    <div>{{ $rele->date_accident }}</div>
    <span class="text-muted text-xs">Date of Accident</span>
  </div>
</div>