inline Javascript to Angular Directive on View

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,

1 Reply

Know the answer? Post it — somebody with the same question will find it here.