css - Error JQuery on Font Awesome Icon -
i creating jquery sliding navigation using font awesome (see: http://fortawesome.github.io/font-awesome/)
now upon adding css since third party web fonts icons wonder how can apply own code using + , - icon. used image icons before planning integrate web icons.
my jquery code is.
$("#toggle > li > div").click(function(){ if(false == $(this).next().is(':visible')) { $('#toggle ul').slideup(); $("span.minus-btn").removeclass('minus-btn'); } $(this).next().slidetoggle(); }); $("#toggle > li > div").click(function() { $("#toggle > li > div").removeclass("active"); $(this).addclass('active'); if($(this).hasclass("active")){ $("span.plus-btn", this).toggleclass('minus-btn'); } });
now stock don't know how fix sizes of icons. please help.
here's jquery fiddle link: http://jsfiddle.net/sg7lz/6/
any great + explanation please?
please show me solution on jsfiddle can check on code , results.
a big thanks!
you can add same style font-size
attribute used fot main icons, css like:
span.plus-btn{ float: right; font-size: 26px; height: 30px; width: 43px; margin-top: -34px; padding:0; color: #fff; }
finally have rewrite code let icon toggle works.
in code take reference in variable of current menu icon $curricon=$(this).find("span.the-btn > i")
change icons, not current in compressed state (plus).
now using toggleclass siwtch plus/minus icons on stored element $curricon
Comments
Post a Comment