How to attach collapsible of font-awesome icon to parent li of nested list?

Question

I have a slide toggle nested list <li> structure as below:

 $(function() { $('body').on('click', function(e) { var element = $(e.target); if (element.is('li') == true && element.children('ol').children('li').length >= 1) { e.stopPropagation(); $(e.target).children('ol').slideToggle(function() {}); } }) }) 

 ol.example li { display: block; margin: 10px 5px; padding: 11px; border: 1px solid #cccccc; color: #0088cc; background: #eeeeee; cursor: pointer; } ol.example ol { display: none; } ol.example li a:before { content: "\\f054"; } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ol class="example"> <li><a href="JavaScript:void(0)" style="visibility: visible;">Account</a> <ol> <li><a href="JavaScript:void(0)" style="visibility: visible;">Account</a></li> <li><a href="JavaScript:void(0)" style="visibility: visible;">Account Statement</a></li> <li><a href="JavaScript:void(0)" style="visibility: visible;">Account Closure</a></li> <li><a href="JavaScript:void(0)" style="visibility: visible;">Internal Account</a></li> </ol> </li> <li><a href="JavaScript:void(0)" style="visibility: visible;">User</a> <ol> <li><a href="JavaScript:void(0)" style="visibility: visible;">User Management</a> <ol> <li><a href="JavaScript:void(0)" style="visibility: visible;">Reset User Password</a></li> <li><a href="JavaScript:void(0)" style="visibility: visible;">Role and Right</a></li> </ol> </li> <li><a href="JavaScript:void(0)" style="visibility: visible;">List Logged-in User</a></li> <li><a href="JavaScript:void(0)" style="visibility: visible;">User</a></li> </ol> </li> <li><a href="JavaScript:void(0)" style="visibility: visible;">LogOut</a></li> </ol> 

So, I tried to apply CSS or Javascript to attach an icon of font-awesome collapsible and expansible to parent list <li> as it is clicked to slide toggle, but so far without any luck.

Is there any CSS or Javascript way I can achieve this effect?

Answer 1

You can use CSS content to achieve that. Add classes toggle-tab-plus and toggle-tab-minus with a pseudo selector(inside a span because you want them to be in the same line). And switch them when you toggle. You can use small images too in the content if you want them to look like something specific.I used this technique to do left navigation on this site. I used an 'x' instead of '-' to collapse and '+' to expand. https://www.simplystamps.com/address-stamps/view-all Below is the js fiddle for above example.

jsfiddle.net/yash009/5khotxu0/2 Working js fiddle for the example above

<div>your Div<span class="toggle-tab-plus"></span></div>

/*css*/
    .toggle-tab-plus:before {
        content: "+";
    }
    .toggle-tab-minus:before {
        content: "-";
    }

Answer 2

@Yashchaturvedi Yes it is, I could manage this end-result by jquery .toggleClass() as below:

 $(function() { $('body').on('click', function(e) { var element = $(e.target); if (element.is('li') == true && element.children('ol').children('li').length >= 1) { e.stopPropagation(); $(e.target).children('ol').slideToggle(function() { $(e.target).closest('li').find('a:first').toggleClass('red'); }); } }) }) 

 ol.example li { display: block; margin: 10px 5px; padding: 11px; border: 1px solid #cccccc; color: #0088cc; background: #eeeeee; cursor: pointer; } ol.example ol { display: none; } ol.example li a:before { content: "\\f054"; } .red { color: red; } 

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ol class="example"> <li><a href="JavaScript:void(0)" style="visibility: visible;">Account</a> <ol> <li><a href="JavaScript:void(0)" style="visibility: visible;">Account</a></li> <li><a href="JavaScript:void(0)" style="visibility: visible;">Account Statement</a></li> <li><a href="JavaScript:void(0)" style="visibility: visible;">Account Closure</a></li> <li><a href="JavaScript:void(0)" style="visibility: visible;">Internal Account</a></li> </ol> </li> <li><a href="JavaScript:void(0)" style="visibility: visible;">User</a> <ol> <li><a href="JavaScript:void(0)" style="visibility: visible;">User Management</a> <ol> <li><a href="JavaScript:void(0)" style="visibility: visible;">Reset User Password</a></li> <li><a href="JavaScript:void(0)" style="visibility: visible;">Role and Right</a></li> </ol> </li> <li><a href="JavaScript:void(0)" style="visibility: visible;">List Logged-in User</a></li> <li><a href="JavaScript:void(0)" style="visibility: visible;">User</a></li> </ol> </li> <li><a href="JavaScript:void(0)" style="visibility: visible;">LogOut</a></li> </ol> 

Just close to what I wish to be, yet I still unable to attach icon to each state of toggle, just now I used class red an example. Appreciate for any suggestion, Thanks.

Answer 3

You need to specify the font-family properly to display the icons. Just one change is all it takes in your code to display the icon.

ol.example li a:before {
  font-family: "FontAwesome";
  content: "\f054";
}

To make it easier, directly use the classes provided by font-awesome. Find required info on their docs: https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

To toggle the icons, just add a parent class to differentiate collapsed and expanded states and use different icons for both.