JSFiddle - React, Tailwind, and code Playground

by wfuller

HTML

<body ng-app="myApp">
    <div ng-controller="myCtrl">
        <button ng-click="slidePanel='active'">Open Div 1</button>
        <div class="div1" ng-class="slidePanel">
            <div class="close" ng-click="removeActive()">Close</div>
            Hi I'm a Slide Panel
        </div>
    </div>
</body>

JavaScript

angular.module('myApp', [])
    .controller('myCtrl', ['$scope', function ($scope) {

    $scope.removeActive = function () {
		
        //Errors with Element is not defined
        /*var myEl = angular.element(element.getElementsByClassName('div1'));
        myEl.removeClass('active');*/
        
        
        //Errors with myEl.removeClass is not a function
        var myEl = document.getElementsByClassName('div1');
        myEl.removeClass('active');
        
        //Errors with [jqLite:nosel] Looking up elements via selectors is not supported by jqLite!
        /*var myEl = angular.element('div1');
        myEl.removeClass('active');*/
        
        
        
        //Errors with Element is not defined
        /*var query = element[0].querySelector('.div1');
        var wrappedQueryResult = angular.element(query);
        query.removeClass('active');*/
 
    }
}]);