切换字体真棒图标（如果启用）？

Question

I am using font awesome to put arrows on an accordion sidebar menu. The extra {liquid code} is from Shopify. I am having a problem to properly toggle my <i class=""> since the class can depend on if the link is active or not.

I am trying to have only the active or open <i> to be fa-angle-up and the others fa-angle-down.

HTML

<div id="accordian">
 <ul>{% for link in linklists.shop.links %}
  <li class="{% if link.active %}active{% endif %}">
   <h3>{{ link.title | escape }}
    <span><i class={% if link.active %}"fa fa-angle-up" aria-hidden="true"{% else %}"fa fa-angle-down" aria-hidden="true"{% endif %}></i></span>
   </h3>
  </li>
 </ul>
</div>        

JQUERY

$(document).ready(function(){
    $("#accordian h3").click(function(){
        $(this).find('i').toggleClass('fa-angle-down fa-angle-up');
        $("#accordian ul ul").slideUp();
        if(!$(this).next().is(":visible"))
        {
            $(this).next().slideDown();
        }
    })
});

Answer 1

i guess you want something like this. it's not the cleanest solution but it works as you want ( as i understood your question )

 $(document).ready(function(){ $("#accordian h3").click(function(){ var ico = $(this).find('i') if( ico.hasClass("fa-angle-up") ) { $(ico).removeClass().addClass("fa-angle-down") } else { $(ico).removeClass().addClass("fa-angle-up") } $("#accordian ul ul").slideUp(); if(!$(this).next().is(":visible")) { $(this).next().slideDown(); } }) }); 

 .fa-angle-up { color:red;} i { font-family:fontAwesome } 

 <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="accordian"> <ul>{% for link in linklists.shop.links %} <li class="{% if link.active %}active{% endif %}"> <h3>{{ link.title | escape }} <span><i class={% if link.active %}"fa fa-angle-up" aria-hidden="true"{% else %}"fa fa-angle-down" aria-hidden="true"{% endif %}></i></span> </h3> </li> </ul> </div> 

Answer 2

I added an example here similar to what you want. It disables other li once you click on any other.

you can remove that functionality by removing first two lines of the click event function

I also altered some html for better snippet run. you can replace it easily.

 $(document).ready(function(){ $("#accordian h3").click(function(){ $("#accordian ul li").removeClass("active"); document.querySelector('.fa').className='fa fa-angle-up'; $(this).find('i').toggleClass('fa-angle-down fa-angle-up'); $(this).parent().toggleClass('active'); $("#accordian ul ul").slideUp(); if(!$(this).next().is(":visible")) { $(this).next().slideDown(); } }) }); 

 li{ cursor:pointer; } li.active{ color:red; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="accordian"> <ul> <li class="listItems"> <h3>link 1 <span><i class="fa fa-angle-up"></i></span> </h3> </li> <li class="listItems"> <h3>link 2 <span><i class="fa fa-angle-up"></i></span> </h3> </li> </ul> </div>