Estoy tratando de cambiar el ícono de cheurón hacia abajo a cheurón hacia arriba cuando se hace clic. Actualmente, muestra "Categorías" y "Ocultar" cuando se hace clic. Me gustaría que dijera "Categorías" todo el tiempo. ¿Es eso posible?
Aquí está el código:
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'})).prepend('Hide '); x.fadeIn(); } else { $(h1).html($('<i/>',{class:'fa fa-chevron-down'})).prepend('Categories '); x.fadeOut(); } }Su "condición si" está en algo que no se puede detectar si será el mismo en todas las condiciones. Entonces es mejor cambiar su condición a algo más específico, como la clase de la etiqueta. como esto :
function arata_ascunde(h1) { var x = $('#showhide'); if ($(h1).find('i').hasClass('fa-chevron-down')) { $(h1).find('i').remove(); $(h1).html($('<i/>',{class:'fa fa-chevron-up'})).append(' Categories'); x.fadeIn(); } else { $(h1).find('i').remove(); $(h1).html($('<i/>',{class:'fa fa-chevron-down'})).append(' Categories'); x.fadeOut(); } }Cambié algunas cosas para que tu resultado sea más hermoso. Este código aún se puede mejorar (no soy un desarrollador front-end).
Usé javascript básico y algo de lógica para cambiar el HTML basado en una clase
Aquí está el codepen para ello - Enlace
Aquí está el archivo JS editado:
<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>y el archivo JS editado
function arata_ascunde(h1) { var x = $('#showhide'); $(h1).find('i').remove(); if (document.querySelector("h1").classList.contains("down")) { $(h1).html($('<i/>',{class:'fa fa-chevron-up'})).prepend('Categories '); document.querySelector("h1").classList.remove("down") x.fadeIn(); } else { $(h1).html($('<i/>',{class:'fa fa-chevron-down'})).prepend('Categories '); document.querySelector("h1").classList.add("down") x.fadeOut(); } }