Estoy tratando de personalizar un acordeón para cambiar un ícono al abrir y cerrar. No sé cómo mover el icono FA después del texto, en lugar de antes.
Me gustaría que la configuración muestre "Categorías (cheurón hacia abajo)" y luego, cuando se haga clic, "Categorías (cheurón hacia arriba)". Esto es lo que tengo hasta ahora:
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <h1 onclick="arata_ascunde(this);" class="btn btn-info " id="show_hide_bt"> <i class="fa fa-chevron-down"></i> Categories </h1> <div id="showhide" style="display:none;"> <ul> <li><a href="#">Hello World</a> </li> </ul> </div>JS
function arata_ascunde(h1) { var x = $('#showhide'); $(h1).find('i').remove(); if ($(h1).text().trim() == 'Categories') { $(h1).html($('<i/>',{class:'fa fa-chevron-up'})).append(' Hide'); x.fadeIn(); } else { $(h1).html($('<i/>',{class:'fa fa-chevron-down'})).append(' Categories'); x.fadeOut(); } }Tienes que usar prepend en js
aquí está el código actualizado
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <h1 onclick="arata_ascunde(this);" class="btn btn-info " id="show_hide_bt"> Categories <i class="fa fa-chevron-down"></i> </h1> <div id="showhide" style="display:none;"> <ul> <li><a href="#">Hello World</a> </li> </ul> </div>para js
function arata_ascunde(h1) { var x = $('#showhide'); $(h1).find('i').remove(); if ($(h1).text().trim() == 'Categories') { $(h1).html($('<i/>',{class:'fa fa-chevron-up'})).prepend(' Hide'); x.fadeIn(); } else { $(h1).html($('<i/>',{class:'fa fa-chevron-down'})).prepend(' Categories'); x.fadeOut(); } }