javascript - jQuery: spin plus to minus font awesome icon, on accordion section click -
i trying learn how rotate/ spin plus sign icon minus sign on click.
i saw effect on vaccordion lukasz watroba.
right capable have code toggle plus icon minus icon, without spin/ convert effect:
mark-up:
<div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseone"> collapsible group item #1 <i class="fa fa-plus"></i> </a> </h4> </div> <div id="collapseone" class="panel-collapse collapse"> <div class="panel-body"> collapsible content #1 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapsetwo"> collapsible group item #2 <i class="fa fa-plus"></i> </a> </h4> </div> <div id="collapsetwo" class="panel-collapse collapse"> <div class="panel-body"> collapsible content #2 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapsethree"> collapsible group item #3 <i class="fa fa-plus"></i> </a> </h4> </div> <div id="collapsethree" class="panel-collapse collapse"> <div class="panel-body"> collapsible content #3 </div> </div> </div> </div> javascript:
function togglesign(e) { $(e.target) .prev('.panel-heading') .find('i') .toggleclass('fa fa-minus fa fa-plus'); } $('#accordion').on('hidden.bs.collapse', togglesign); $('#accordion').on('shown.bs.collapse', togglesign); hope positive here always, find out how achieve effect need.
many thanks.
if want plus/minus seamlessly transition, use pseudo elements rather font icons (that's how it's being done in example provided). in doing so, can avoid using additional jquery well.
in example below, icon changes based on .collapsed class automatically toggled on .accordion-toggle element. opacity of ::after pseudo element toggled create transition you're trying achieve.
snippet below:
.accordion-toggle { position: relative; } .accordion-toggle::before, .accordion-toggle::after { content: ''; display: block; position: absolute; top: 50%; right: -22px; width: 14px; height: 4px; margin-top: -2px; background-color: #000; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-transition: 0.25s; transition: 0.25s; } .accordion-toggle::before { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); opacity: 0; } .accordion-toggle.collapsed::before { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); opacity: 1; } .accordion-toggle.collapsed::after { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); }<script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.js"></script> <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseone"> collapsible group item #1 </a> </h4> </div> <div id="collapseone" class="panel-collapse collapse"> <div class="panel-body"> collapsible content #1 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapsetwo"> collapsible group item #2 </a> </h4> </div> <div id="collapsetwo" class="panel-collapse collapse"> <div class="panel-body"> collapsible content #2 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapsethree"> collapsible group item #3 </a> </h4> </div> <div id="collapsethree" class="panel-collapse collapse"> <div class="panel-body"> collapsible content #3 </div> </div> </div> </div>alternatively, if still want use font awesome, use following. unfortunately, transition isn't going smooth 1 above because can't transition between 2 icons can transition between pseudo elements.
snippet below:
function togglechevron(e) { $(e.target) .prev('.panel-heading') .find("i") .toggleclass('fa fa-minus fa fa-plus'); } $('#accordion').on('hidden.bs.collapse', togglechevron); $('#accordion').on('shown.bs.collapse', togglechevron);.accordion-toggle + .fa { display: inline-block; -webkit-transition: 0.25s; transition: 0.25s; } .accordion-toggle.collapsed + .fa { -webkit-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); }<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script> <link rel="stylesheet" type="text/css" href="http://getbootstrap.com/dist/css/bootstrap.css"> <script type="text/javascript" src="http://getbootstrap.com/dist/js/bootstrap.min.js"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseone"> collapsible group item #1 </a><i class="fa fa-plus"></i> </h4> </div> <div id="collapseone" class="panel-collapse collapse"> <div class="panel-body"> collapsible content #1 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapsetwo"> collapsible group item #2 </a><i class="fa fa-plus"></i> </h4> </div> <div id="collapsetwo" class="panel-collapse collapse"> <div class="panel-body"> collapsible content #2 </div> </div> </div> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapsethree"> collapsible group item #3 </a><i class="fa fa-plus"></i> </h4> </div> <div id="collapsethree" class="panel-collapse collapse"> <div class="panel-body"> collapsible content #3 </div> </div> </div> </div>
Comments
Post a Comment