Cant override css property using jquery

Question

I have a div and in normal case display:block css is applied to it.And a hide button is there to hide the div on click on that button.But jquery's

$('#divid').css()

cant override css propoerty.Here is an example fiddle. jsfiddle

<div ng-controller="MyController">
   <div id="div1" class="showdiv">This is the div need to hide on click
   <a href='#' ng-click="hidedivfn()">Hide</a>
   </div>
   </div>
</div>

function MyController($scope) {
  $scope.hidedivfn=function(){
  $('#div1').css({ 'display': "none!important" });
  }

}

.showdiv{
  display:block;
}

Possible duplicate of [Overriding !important with css or jquery](http://stackoverflow.com/questions/11962962/overriding-important-with-css-or-jquery) — smoksnes, Aug 11 '16 at 10:47

score 1 · Answer 1 · answered Aug 11 '16 at 10:50

Don't use jquery in angularjs controller. Don't use hash in anchor. It will try to navigate. Use button. Please read more basics. Try like following,

  <div ng-controller="MyController">
       <div id="div1" ng-if="div.show">This is the div need to hide on click
       <a ng-click="hidedivfn()">Hide</a>
       </div>
       </div>
    </div>

    function MyController($scope) {
$scope.div={show:true};
      $scope.hidedivfn=function(){
      $scope.div.show=false;
      }

    }

score 0 · Answer 2 · answered Aug 11 '16 at 10:51

0

To hide div ( or any element) use $('#div1').hide() And to show div (or any element) use $('#div1').show()

answered Aug 11 '16 at 10:51

Ujwal Khairnar

508
1
4
19

score 0 · Answer 3 · answered Aug 11 '16 at 10:52

you can use ng-hide for this purpose , look at snippet given below.

var app = angular.module("myApp",[]);

app.controller("MyController" , function($scope){
  $scope.hideDiv = false;
  
  $scope.hidedivfn = function(){
    $scope.hideDiv = true;
  }
  
   $scope.showdivfn = function(){
    $scope.hideDiv = false;
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="MyController">
   <div id="div1" ng-hide="hideDiv">This is the div need to hide on click
   
   </div>
  
  <a href='#' ng-click="hidedivfn()">Hide</a>
   <a href='#' ng-click="showdivfn()">show</a>
   </div>
</div>

score 0 · Answer 4 · answered Aug 11 '16 at 11:10

In Your case you don't have to override but you can achieve it with angular way

ng-Show
ng-if
ng-hide
ng-class

But among above you can use ng-show

<div id="div1" ng-show="stat">This is the div need to hide on click
<a ng-click="hidedivfn()">Hide</a>


$scope.stat = true;
function hidedivfn(){
    if($scope.stat == true){
        $scope.stat = false;
    }else{
        $scope.stat = true;
    }
}

Documentation for ng-showhere.

Regards

Cant override css property using jquery

4 Answers4