When clicking the button, show accordion (Jquery)

Question

I need help with a code. Apparently, it seems like a simple problem. I want to make a script so that when the user clicks the button, it shows the accordion. I was even able to write something that worked, but I wanted to open an accordion for each card separately. I think it's the "this" tag, but the problem is that ".find" doesn't find the accordion because it's not in the same group as the button.

See my code, you will understand better.

 $('#fuelAccordion').click(function() { $(this).find('.cardAccordion').slideToggle('show'); })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card fuelCard"> <div class="flex"> <div class="col"> <div class="flex"> <div> <i class="fas fa-angle-down pointer" id="fuelAccordion"></i> </div> </div> </div> </div> <div class="cardAccordion"> <div class="flex"> <div class="inputGrid"> <div> <label for="placa">Litros</label> <select class="form-control"> <option value="5">5 Lts</option> </select> </div> <div> <label for="placa">Valor total</label> <input type="text" class="form-control" value="R$38,46" disabled /> </div> </div> <button class="btn btn-primary">Adicionar</button> </div> </div> </div>

Answer 1

You need to use parents because this not find .cardAccordion inside #fuelAccordion

 $('#fuelAccordion').click(function () { $(this).parents('.fuelCard').find('.cardAccordion').slideToggle('show'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="card fuelCard"> <div class="flex"> <div class="col"> <div class="flex"> <div> <i class="fas fa-angle-down pointer" id="fuelAccordion">Test</i> </div> </div> </div> </div> <div class="cardAccordion"> <div class="flex"> <div class="inputGrid"> <div> <label for="placa">Litros</label> <select class="form-control"> <option value="5">5 Lts</option> </select> </div> <div> <label for="placa">Valor total</label> <input type="text" class="form-control" value="R$38,46" disabled /> </div> </div> <button class="btn btn-primary">Adicionar</button> </div> </div> </div>