|
Note
toggle() function used for both show and hide ,this work respectively.In Example 1: explained about how to show and hide element when click some element.
Related topics :
show() function used to show the hidden element.In Example 2: explained about how to show element when click some element.
hide() function used to hide the shown element.In Example 3: explained about how to hide element when click some element.
|
Example: 1 How to show and hide element when click some element <html>
<head>
<title>HTML-JQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function () {
$(".one").click(function () {
$(".two").toggle();
});
$(".three").click(function () {
$(".four").toggle();
});
});
</script>
<style type="text/css">
.two,
.four {
display: none;
}
</style>
</head>
<body>
<div class="one">one-Click here to show next number</div>
<div class="two">two</div>
<div class="three">three-Click here to show next number</div>
<div class="four">four</div>
</body>
</html> |
|
Example: 1 Demo
|
Example: 2 How to show element when click some element <html>
<head>
<title>HTML-JQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function () {
$(".one").click(function () {
$(".two").show();
});
$(".three").click(function () {
$(".four").show();
});
});
</script>
<style type="text/css">
.two,
.four {
display: none;
}
</style>
</head>
<body>
<div class="one">one-Click here to show next number</div>
<div class="two">two</div>
<div class="three">three-Click here to show next number</div>
<div class="four">four</div>
</body>
</html> |
|
Example: 2 Demo
|
Example: 3 How to hide element when click some element <html>
<head>
<title>HTML-JQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function () {
$(".one").click(function () {
$(".two").hide();
});
$(".three").click(function () {
$(".four").hide();
});
});
</script>
</head>
<body>
<div class="one">one-Click here to hide next number</div>
<div class="two">two</div>
<div class="three">three-Click here to hide next number</div>
<div class="four">four</div>
</body>
</html> |
|
Example: 3 Demo
|
