find closest parent selector then find element by class

Question

A similar question has been asked here the answers from here where helpful but didn't work for me. My html is:

@foreach ($productSelection as $d)
                                            <div class="row justify-content-md-center el-selection vertical-align"
                                            data-type={{$selection}}
                                            data-id={{$d->id}}>
                                                <div class="col-md-3">
                                                  <img src="{{ asset('storage/' . $d->image_path) }}" alt=""
                                                          class="w-100 img-fluid blur-up lazyload image_zoom_cls-0">
                                                </div>
                                                <div class="col-md-6">
                                                  <h6 class="product-title">{{ $d->name }}</h6>
                                                  <button class="btn btn-outline btn-sm detailsToggle">Show me details</button>
                                                </div>
                                            </div>
                                            <div>
                                              <p class="details-description" style="text-align: left; display: none" >{{ $d->description }}</p>
                                            </div>
                                          <hr/>
                                          @endforeach

this creates about 8 of these divs on the page. My goal is to click the class detailsToggleand display the p element with class details-description

I have tried the following:

$( '.detailsToggle' ).click(function() {
  $( this )
  .closest('.row').find('.details-description').show()
})

In this same manner I tried .next, .siblings .parents worked but it shows ALL elements with the class .details-description, which is not what I need. I need only the element nearest/closest in the same row as the element clicked.

How can I achieve this?

Answer 1

According to your jQuery code, Your HTML code should look like this:

@foreach ($productSelection as $d)
<div class="row justify-content-md-center el-selection vertical-align" data-type={{$selection}} data-id={{$d->id}} >
    <div class="col-md-3">
        <img src="{{ asset('storage/' . $d->image_path) }}" alt="" class="w-100 img-fluid blur-up lazyload image_zoom_cls-0">
    </div>
    <div class="col-md-6">
        <h6 class="product-title">{{ $d->name }}</h6>
        <button class="btn btn-outline btn-sm detailsToggle">Show me details</button>
    </div>
    <div>
        <p class="details-description" style="text-align: left; display: none" >{{ $d->description }}</p>
    </div>
</div>
<hr/>
@endforeach

Classes .detailsToggle and .details-description must be children of class .row.