Shopify Question posted in
The Shopify help center can be found here.

Toggle font awesome icon if active? – Shopify

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();
        }
    })
});
Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search