[Solved] How to change CSS display none or block property using jQuery?

Problem: 

I was trying to hide a div on my website using jQuery. But I can not manage to do it. Here is my HTML code:

<div class="hide-div">Click To Hide</div>
<div class="show-div">Click To Show</div>

So in this article,  we are going to learn how to change CSS display none or block property using jQuery?

Solution: 

There are multiple ways to do this. Here are they: 

1. You can use the show() and hide() method of jQuery. 

$(".hide-div").hide();
$(".show.div").show();

2. Also you can use the jQuery css() method.

$(".hide-div").css("display", "none");
$(".show.div").css("display", "block");

3. There is another method to hide and show div. It is  toggle() method.

$(".toggle-div").toggle();

---

Hope this solves your problem. If you have any feedback or question you can comment below.