How to Use Jquery for Slide Left to Right------
When we are making website most important things are the Jquery, Css, Html, Photoshope.
HTML --Hyper Text Markup Language
When we are making website most important things are the Jquery, Css, Html, Photoshope.
HTML --Hyper Text Markup Language
<html>
<head>
---------------------------------------style css-----------------------
<style type="text/css">
.mydiv {
padding-top:10px;
background:#bef3ca;
margin: 0 auto;
width:200px;
text-align:left;
clear:both;
display: none;
}
.mytext {
text-align:center;
}
.wrapper {
display:block;
width:400px;
border:1px solid gray;
border:1px solid gray;
}
</style>
--------------------------------------------------------//------------------------------
------------------------------------Script Jquery------------------------------------
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$("#showr").click(function () {
$(".mydiv").show("fast");
});
$("#hidr").click(function () {
$(".mydiv").hide(1000);
});
</script>
<body>
<div class="wrapper">
<label>Do you want to create a new entry?</label>
<button id="showr" type="button">YES</button>
<button id="hidr" type="button">NO</button>
<br />
<div class="mydiv">
<label>content1 <span class="small">Describe your Content</span>
</label>
<div class="mytext">
hello Frandzz<br />
</div>
</div>
<div class="mydiv">
<label>Content2 <span class="small">Describe your content</span>
hello Frandzz<br />
</label>
<div class="mytext">
<textarea class="txtField" cols="20" id="" name="" rows="5"></textarea>
</div>
</div>
</div>
</body>
</html>
<head>
---------------------------------------style css-----------------------
<style type="text/css">
.mydiv {
padding-top:10px;
background:#bef3ca;
margin: 0 auto;
width:200px;
text-align:left;
clear:both;
display: none;
}
.mytext {
text-align:center;
}
.wrapper {
display:block;
width:400px;
border:1px solid gray;
border:1px solid gray;
}
</style>
--------------------------------------------------------//------------------------------
------------------------------------Script Jquery------------------------------------
<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$("#showr").click(function () {
$(".mydiv").show("fast");
});
$("#hidr").click(function () {
$(".mydiv").hide(1000);
});
</script>
------------------------------------------------//---------------------------------
</head><body>
<div class="wrapper">
<label>Do you want to create a new entry?</label>
<button id="showr" type="button">YES</button>
<button id="hidr" type="button">NO</button>
<br />
<div class="mydiv">
<label>content1 <span class="small">Describe your Content</span>
</label>
<div class="mytext">
hello Frandzz<br />
</div>
</div>
<div class="mydiv">
<label>Content2 <span class="small">Describe your content</span>
hello Frandzz<br />
</label>
<div class="mytext">
<textarea class="txtField" cols="20" id="" name="" rows="5"></textarea>
</div>
</div>
</div>
</body>
</html>
 |
| Without Click See |
After click the Output
 |
| After Click Show slide |
Comments
Post a Comment