hice un acordeón que parece desaparecer cada vez que hago clic en la flecha de abajo es mi código por favor ayuda he hecho un violín para una mejor comprensión
$(document).ready(function() { $(document).on('click','.picto-accr', function (e) { let id_ = $(this).data("arcid"); $(this).toggleClass('picto-open'); // $('.table-container').toggleClass('picto-open'); $("#"+id_).slideToggle( "slow" ); $('.table-container').toggle( "slow" ); }); }); /*tabs*/ #tabs_container{ margin-top: -195px; width: 50%; margin-left: 239px; } .accr-button{ border:1px solid #adadad; padding:10px 20px; text-transform: uppercase; font-weight: 400; font-size: 12px; color: #2b2b2b; letter-spacing: 0.1em; font-family: raleway,sans-serif; margin-bottom: 0!important; cursor: pointer; background-color:#e1e1e1; } .picto-accr{ width: 20px; float: right; transform: rotate(90deg); margin-top: 1px; } .picto-open{ transform:rotate(270deg); } .table-container{ padding:50px; display:none; background-color:#e1e1e1; border-top:1px dotted #000; margin-top:20px; text-transform:none; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="biodate" class="accr-button">Bio Data<img class="picto-accr" src="http://stylenweb.com/fleche_grise_50.png" data-arcid="biodate" /> <div class="table-container"> test 1 </div> </div> <div class="accr-button" id="course">Course<img class="picto-accr" src="http://stylenweb.com/fleche_grise_50.png" data-arcid="course" /> <div class="table-container"> test 2 </div> </div>Básicamente, lo que quiero que suceda es que el div deje de desaparecer y todo lo que debería hacer es contraerse y expandirse.
Su problema es que el div no debería alternar también y no está apuntando específicamente al contenido del acordeón.
$(document).ready(function() { $(document).on('click','.picto-accr', function (e) { let id_ = $(this).data("arcid"); $(this).toggleClass('picto-open'); // $('.table-container').toggleClass('picto-open'); //$("#"+id_).slideToggle( "slow" ); <-- comment this line $('#'+id_ +' .table-container').toggle( "slow" ); <-- make it specific }); });Bueno, con un poco de inspección, puede descubrir fácilmente que en realidad está configurando display: none en el div con id="biodate" e id="course"
Para el HTML lo que puedes hacer es
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="accr-button">Bio Data<img class="picto-accr" src="http://stylenweb.com/fleche_grise_50.png" data-arcid="biodate" /> <div class="table-container" id="biodate"> test 1 </div> </div> <div class="accr-button" >Course<img class="picto-accr" src="http://stylenweb.com/fleche_grise_50.png" data-arcid="course" /> <div class="table-container" id="course"> test 2 </div> </div>Y el jQuery
$(document).ready(function() { $(document).on('click','.picto-accr', function (e) { let id_ = $(this).data("arcid"); $(this).toggleClass('picto-open'); // $('.table-container').toggleClass('picto-open'); $("#"+id_).slideToggle( "slow" ); }); });Y tu acordeón debería estar funcionando bien ahora.