0

How to Hide and Show HTML Elements using simple jQuery

How to Hide and Show HTML Elements using simple jQuery
you can hide and show HTML elements using simple jQuery the hide() and show() methods:

Just follow my Simple Steps

HTML Markup

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="wrapper">
<a href="#" id="hide">Hide</a>
<a href="#" id="show">Show</a>
<h1>
NowStartWebDesign Mainly focus to HTML, CSS, Java Script Beginners and Advanced tutorials.
</h1>
</div>
</body>
</html>
You can add this simple jQuery Code your HTML documnet

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
     $("#hide").click(function() {
$("h1").hide();
});
$("#show").click(function() {
$("h1").show();
     });
});
</script>

CSS Code

<style>
body {
     background: #f3f3f3;
     background: url(http://demos.nowstartwebdesign.com/images/cream_pixels.png);
     font-family: Arial, Helvetica, sans-serif;
}

a {
     background: #0074BC;
     border: solid 1px #359ADB;
     padding: 2px 20px;
     text-decoration: none;
     color: #FFFFFF;
     font-size: 12px;
}
.wrapper {
     margin: 0px auto;
     width: 50%;
}
</style>

Demo download

Unknown

nowstartwebdesign.com tutorial has been prepared for the beginners to help them understand basic HTML programming. After completing this tutorial you will find yourself at a moderate level of expertise Web Designing from where you can take yourself to next levels

No comments :

Post a Comment