Bootstrap Accordion

Get the arrow and the accordion to act together.

by Julian

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container">
    <table>
    <tr><i class="icon-right-dir" id="arrow" data-toggle="collapse" data-parent="#accordion" href="#content"></i>Click the Arrow to reveal the row</tr>
    <tr>Here is the row</tr>
    
    </table>


</div>

CSS

/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');

body {
    margin: 10px;
}

JavaScript

/* Latest compiled and minified JavaScript included as External Resource */


  //Modify Arrow on credits table
$('.credits tr ').on("click",function(e){
alert('click');
    $(this).find('i').toggleClass('icon-right-dir icon-down-dir');
    $(this).closest('.collapse').collapse('toggle');

  
   
    });//End of Modify Arrow