How to hide and show div content in jquery?
jQuery is javascript library. It has many plugins for opensource applications as well as for static sites. This is very simple tutorial to hide and show div content. For doing code in jquery we must have to include jQuery library. You can include jquery library by following statement.
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
I included google jquery library, you can download it and put it on your site directory. We will setup click event listener which will be triggered when any user click on the object.
<a href="#" class="hide-show">Show/hide</a> <div class="showdiv"> Content that you need for hide/show </div>
And we also need CSS code for this to give some styles. By default content div will be hidden.
.showdiv {
height:300px;
background-color:#999;
padding:20px;
margin-top:10px;
border:5px solid #CCC;
}
.hide-show {
display:none;
}
Finally it is time to write jQuery code. We will include jQuery library as I stated above.
<script type="text/javascript">
$(document).ready(function(){
$(".showdiv").hide();
$(".hide-show").show();
$('.hide-show').click(function(){
$(".showdiv").slideToggle();
});
});
</script>
That’s it. Hope this will help.
