Necesito ayuda con un código. Aparentemente, parece un problema simple. Quiero hacer un script para que cuando el usuario haga clic en el botón, muestre el acordeón. Incluso pude escribir algo que funcionó, pero quería abrir un acordeón para cada tarjeta por separado. Creo que es la etiqueta "this", pero el problema es que ".find" no encuentra el acordeón porque no está en el mismo grupo que el botón.
Mira mi código, lo entenderás mejor.
$('#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>Necesita usar padres porque esto no encuentra .cardAccordion dentro #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>