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 — smoksnes
– smoksnes, Commented Aug 11, 2016 at 10:47

Jeevanandan J · Accepted Answer · 2016-08-11 10:50:52Z

1

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;
      }

    }

answered Aug 11, 2016 at 10:50

Jeevanandan J

1441 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ujwal Khairnar · Accepted Answer · 2016-08-11 10:51:35Z

0

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

answered Aug 11, 2016 at 10:51

Ujwal Khairnar

5481 gold badge4 silver badges19 bronze badges

Comments

Dinesh Shah · Accepted Answer · 2016-08-11 10:52:28Z

0

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>

answered Aug 11, 2016 at 10:52

Dinesh Shah

1,2331 gold badge8 silver badges13 bronze badges

Comments

Hardik Vaghani · Accepted Answer · 2016-08-11 11:10:29Z

0

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

answered Aug 11, 2016 at 11:10

Hardik Vaghani

2,18330 silver badges48 bronze badges

Collectives™ on Stack Overflow

Cant override css property using jquery

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related