angularjs - How to Remove the class 'in' dynamically which is inbuilt class in bootstrap when only clicked -
when clicked on button class "in" in div element must removed dynamically.
`<div class="container"> <h2>simple collapsible</h2> <p>click on button toggle between showing , hiding content.</p> <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo">simple collapsible</button> <div id="demo" class="collapse in"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod. </div> </div>`
here sample code.
explanation
in example, in class render element bold.
a simple directive called onclick-toggle-class declared attribute of element binds onclick event on element , add/remove css class passed in param (we use directive attribute value).
angular.module('app', []); angular.module('app').directive('togglenextelementclass', function() { return { restrict: 'a', link: function(scope, element, attrs) { element.bind('click', function() { // next element var nextelement = element[0].nextelementsibling; if(nextelement) { angular.element(nextelement).toggleclass(attrs.togglenextelementclass); } }); } }; });<!doctype html> <html lang="en" ng-app="app"> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.4/angular.min.js"></script> <script src="script.js"></script> <style> .collapse { display: none; } .in { display: block; } </style> </head> <body> <div class="container"> <h2>simple collapsible</h2> <p>click on button toggle between showing , hiding content.</p> <button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" toggle-next-element-class="in">simple collapsible</button> <div class="collapse in"> lorem ipsum dolor sit amet, consectetur adipisicing elit, sed eiusmod. </div> </div> </body> </html>
Comments
Post a Comment