ASP.NET - How to Hide-Show Div using Jquery

ASP.NET - How to Hide-Show Div using Jquery ?

I am here with another article on Jquery 

This article simply shows that How To Hide or Show (DIV) based on click .

It will be very useful , because we need some functionalities at our site in which some action much needed at client side and reduce load of it .

So here im demonstrating the same as follow :

First step is to add refrence of Javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript">
</script>

Second step is to make some design with CSS

button, .button:visited 
{
 background: #222;
 display: inline-block;
 padding: 5px 10px 6px;
 color: #fff;
 text-decoration: none;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 border-bottom: 1px solid rgba(0,0,0,0.25);
 font-size: 11px;font-weight: bold;line-height: 1;text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
        background-color: #2981e4;
        top:250px;
        float:left;
        left:150px;
        position:fixed;
 
}

.button:hover {background-color: #2575cf;}
 
.detailDiv 
{
 height:80px;
        width: 400px;
 background: #222;
 display: inline-block;
 padding: 50px 10px 6px;
 color: #fff;
 text-decoration: none;
 -moz-border-radius: 6px;
 -webkit-border-radius: 6px;
 -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.6);
 text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
 border-bottom: 1px solid rgba(0,0,0,0.25);
 position: relative;
 cursor: pointer
        font-size: 11px;font-weight: bold;line-height: 1;text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
        background-color: #91bd09;
 text-align:center;
}
43.detailDiv:hover {background-color: #749a02;}

Now write following code to see effect on specific DIV

<div class="detailDiv">
 Manav Pandya – Show-Hide Demo using ASP.NET Jquery
</div>
<button class="button">
 Show or Hide div 
</button>

Now add following code that shows hiding of div so we need to add click listener 

<script type="text/javascript">
 $(document).ready(function()
{
         $(".detailDiv").hide();
         $('.button').click(function()
{
 $(".detailDiv").slideToggle();
  }
);
}); 
</script>

We are done ...

Try to run above code and enjoy learning ...

Keep tune in for more updates ...


basic asp.net mvc tutorials, Free asp.net mvc Tutorials for beginners, mvc, asp.net mvc, .net tutorials, mvc tutorial, mvc tutorials, asp.net mvc tutorials, mvc tutorial, mvc tutorials for Beginners , asp.net mvc Basics, basic mvc, mvc4, mvc5,.net mvc