单击另一个 DIV 时隐藏/显示 div

Question

In my foreach loop, I would like to show the rest 4 elements of the current field when clicks to the first Div it should show the rest 4 fields(DIV) which belongs to that value.

 @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

Please help me, I am trying JQuery toggle, but it is not working, Please let me know if there is better way to do it.

My JQuery Code:

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

Answer 1

You are calling the Class selector when your elements have ID attributes.

See example.

 $(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>