Adding javascript transition to boostrap accordion

Question

I have an accordion to hide blog posts in a webpage. I have a downwards arrow which I want to rotate to an upwards arrow when a blog post (accordion section) has been opened. These should be independent of other arrows attached to other posts obviously.

I am using bootstrap framework as a base. I tried following the instructions here http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_collapse_togglebtn&stacked=h , along with what I already know/have used to try to add rotation. My problem is that, as I'm not using a button (the whole blog post is clickable to expand and collapse it), I can't work out what I need to put in the javascript where the question marks are. (adding a data-target attribute to the tag breaks the expandability of the post).

$(" ??? ").on("hide.bs.collapse", function(){
    $('.expand-image.text-center.glyphicon.glyphicon-chevron-down').addClass('turn-arrow');
});
$(" ??? ").on("show.bs.collapse", function(){
    $('.expand-image.text-center.glyphicon.glyphicon-chevron-down').removeClass('turn-arrow');
});

expand-image.text-center.glyphicon.glyphicon-chevron-down.turn-arrow {
    -webkit-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<a class="blog" data-toggle="collapse" data-parent="#accordion"
   href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
   <div class="panel">
     <div class="panel-heading" role="tab" id="headingOne">
       <h4 class="panel-title">
         <div class="row">
           <div class="container col-md-12 heading-container">
             <div class="col-md-1 col-sm-2 text-center">
               <h3 class="date-text">Jun 25th</h3>
             </div>
             <div class="col-md-11 col-sm-10">
               <h3>This is where the post title goes</h3>
             </div>
           </div>
         </div>
       </h4>
     </div>
     <div class="panel-teaser panel-body" >
       <div class="row">
         <div class="col-md-1">
         </div>
         <div class="container col-md-11">
           This is where the description goes
           This should be the blog post's first paragraph (which needs to be catchy, no images here though)
          </div>
        </div>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in" 
                 role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
          <div class="row">
            <div class="col-md-1">
            </div>
            <div class="container col-md-11">
              This is where the main text body goes.
              This should be the rest of the blog post, images and all)
             </div>
           </div>
         </div>
       </div>
       <span class="expand-image text-center glyphicon glyphicon-chevron-down"></span>
       <hr>
     </div>
   </a>

   <a class="blog collapsed" data-toggle="collapse" data-parent="#accordion" 
      href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
     <div class="panel">
       <div class="panel-heading" role="tab" id="headingTwo">
         <h4 class="panel-title">
           <div class="row">
             <div class="container col-md-12 heading-container">
               <div class="col-md-1 col-sm-2 text-center">
                 <h3 class="date-text">Jun 26th</h3>
               </div>
               <div class="col-md-11 col-sm-10">
                 <h3>This is where the post title goes</h3>
               </div>
             </div>
           </div>
         </h4>
       </div>
       <div class="panel-teaser panel-body">
         <div class="row">
           <div class="col-md-1">
           </div>
           <div class="container col-md-11">
             This is where the description goes. This should be the blog post's first paragraph (which needs to be catchy, no images here though)
           </div>
         </div>
       </div>
       <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
         <div class="panel-body">
           <div class="row">
             <div class="col-md-1">
             </div>
             <div class="container col-md-11">
               This is where the main text body goes.
               This should be the rest of the blog post, images and all)
             </div>
           </div>
         </div>
       </div>
       <span class="expand-image text-center glyphicon glyphicon-chevron-down"></span>
       <hr>
     </div>
   </a>
 </div>

Why not css transitions? http://www.w3schools.com/css/css3_transitions.asp — Skatch, Jul 07 '15 at 11:01

score 1 · Accepted Answer · edited May 23 '17 at 11:51

1

You can attach the eventHandler on any Element, that is one of the parent Elements of .collapse. This is because the Event is triggered on the .collapse Element and bubbles all the way uppward. You can read more about event bubbling here.

You could, for example, attach the eventHandler to every Element with class "blog" as I did to solve your problem.

Relevant jsFiddle

$(".blog").each(function () {
    $(this).on("hide.bs.collapse", function () {
        $(this).find('.expand-image.text-center.glyphicon.glyphicon-chevron-down').removeClass('turn-arrow');
    });
    $(this).on("show.bs.collapse", function () {
        $(this).find('.expand-image.text-center.glyphicon.glyphicon-chevron-down').addClass('turn-arrow');
    });
});

Note the .each at the beginning. This attaches a different eventHandler to every Element matching the selector.

Now you can search the icon to be rotated in this Element --> $(this).find( This will only find the one arrow inside the clicked blog element.

A very detailed explanation can also be found in this post.

edited May 23 '17 at 11:51

Community

1
1

answered Jul 07 '15 at 11:47

Andreas Grünh

336
1
6

This answer seems great, and the fiddle works perfectly. But when I add this to my code, it doesn't work. Any idea why? – Spratters53 Jul 07 '15 at 13:53
What exactly did you add? In the css part of your question I had to add a point before expand-image, you could check if the turn-arrow class is added and removed to your dom. (right-click on Element and click inspect element) – Andreas Grünh Jul 07 '15 at 13:59
It was the . I missed from the css. It now works, but the blog post which starts open has the arrow the wrong way to begin with, only rectifying itself after it's been closed and re-opened. – Spratters53 Jul 07 '15 at 14:06
Just add the turn-arrow class to the glyphicon-down in your html – Andreas Grünh Jul 07 '15 at 14:08
Duh, dunno how I missed that. Thanks very much! Perfect answer and help :) – Spratters53 Jul 07 '15 at 14:09

Adding javascript transition to boostrap accordion

1 Answers1