inline Javascript to Angular Directive on View

Question

Hi,

 

I have following javascript code:

$(document).on('click', '.panel-heading span.clickable', function (e) {
       var $this = $(this);
       if (!$this.hasClass('panel-collapsed')) {
           $this.parents('.panel').find('.panel-body').slideUp();
           $this.addClass('panel-collapsed');
           $this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
       } else {
           $this.parents('.panel').find('.panel-body').slideDown();
           $this.removeClass('panel-collapsed');
           $this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
       }
   })

and html as:

  <div class="col-100">
                    <div class="panel panel-danger">
                        <div class="panel-heading" style="background:#cc0000">
                            <h3 class="panel-title" style="color: white">
                                Heading Pabel
                                <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-down"></i></span>
                            </h3>
                        </div>
                        <div class="panel-body" style="display:none;">
Body of panel
</div>

 Please help in creating directive and how to use it on html page.

The directive has to be saved on separate .js file. 

 

Any help would be highly appriciable.

 

Thanks,