1
Answer

inline Javascript to Angular Directive on View

Ms_ Dev

Ms_ Dev
7y
1.2k
1
Hi,
 
I have following javascript code:
  1. $(document).on('click', '.panel-heading span.clickable', function (e) {  
  2.        var $this = $(this);  
  3.        if (!$this.hasClass('panel-collapsed')) {  
  4.            $this.parents('.panel').find('.panel-body').slideUp();  
  5.            $this.addClass('panel-collapsed');  
  6.            $this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');  
  7.        } else {  
  8.            $this.parents('.panel').find('.panel-body').slideDown();  
  9.            $this.removeClass('panel-collapsed');  
  10.            $this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');  
  11.        }  
  12.    })  
and html as:
  1.   <div class="col-100">  
  2.                     <div class="panel panel-danger">  
  3.                         <div class="panel-heading" style="background:#cc0000">  
  4.                             <h3 class="panel-title" style="color: white">  
  5.                                 Heading Pabel  
  6.                                 <span class="pull-right clickable"><i class="glyphicon glyphicon-chevron-down"></i></span>  
  7.                             </h3>  
  8.                         </div>  
  9.                         <div class="panel-body" style="display:none;">  
  10. Body of panel  
  11. </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,
 
Answers (1)
Next Recommended Forum