In
this article I am going to explain how to show and hide the div on button click
using Jquery.
In
the previous article I have explained How to search and highlight the matchedtext using AngularJs, Angularjs Tutorial: Pagination using dirpagination Jquery,
AngularJs tutorial: Highlight the matched text in search result and how todisplay default image if image not available using AngularJs.
Description:
I
want to show and hide the div on button click. You can show and hide div using show and hide function
of Jquery.
Implementation:
I
have added two button to html page one to hide and another one to show. On html
page load div will not be visible. Add the CDN of jquery to page and add the below given snippets
to page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
$("#test").hide();
$("#btnshow").click(function () {
$("#test").show();
});
$("#btnhide").click(function () {
$("#test").hide();
});
</script>
Complete
HTML of page:
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<input type="submit" value="Show" id="btnshow">
<input type="submit" value="Hide" id="btnhide">
<div id="test">Lorem
Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen
book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker
including versions of Lorem Ipsum.</div>
<script>
$("#test").hide();
$("#btnshow").click(function () {
$("#test").show();
});
$("#btnhide").click(function () {
$("#test").hide();
});
</script>
</body>
</html>
0 Comments