I am trying to learn how to rotate/ spin a plus sign icon into a minus sign on click.

I saw the effect on the vAccordion by Lukasz Watroba.

Right now I am only capable to have the code toggle the plus icon to a minus icon, but without the 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 to get some positive help here as always, to find out how to achieve the effect I need.

Many thanks.

I am trying to learn how to rotate/ spin a plus sign icon into a minus sign on click.

I saw the effect on the vAccordion by Lukasz Watroba.

Right now I am only capable to have the code toggle the plus icon to a minus icon, but without the 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 to get some positive help here as always, to find out how to achieve the effect I need.

Many thanks.

• javascript
• jquery
• twitter-bootstrap-3
• font-awesome

• vAccordion does it with CSS transforms and transitions – adeneo Commented Jan 6, 2016 at 4:39

2 Answers 2

If you want the plus/minus to seamlessly transition, you could use pseudo elements rather than font icons (that's how it's being done in the example you provided). In doing so, you can avoid using any additional jQuery as well.

In the example below, the icon changes based on the .collapsed class that is automatically toggled on the .accordion-toggle element. The opacity of the ::after pseudo element is toggled to create the transition you're trying to achieve.

Updated Example

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: all 0.25s;
  transition: all 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./jquery-2.1.0.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn./bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn./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 you still want to use font awesome, you could use the following. Unfortunately, the transition isn't going to be as smooth as the one above because you can't transition between two icons like you can transition between pseudo elements.

Example Here

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: all 0.25s;
  transition: all 0.25s;
}
.accordion-toggle.collapsed + .fa {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

<script type="text/javascript" src="//code.jquery./jquery-1.9.1.js"></script>
<link rel="stylesheet" type="text/css" href="http://getbootstrap./dist/css/bootstrap.css">
<script type="text/javascript" src="http://getbootstrap./dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn./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>

You may need to add animation for this object http://jsfiddle/ntd9fkzu/8/

** above this fiddle may help you **