Jquery how to give direction using show effect for multiple divs?
Question
I have a problem with some jQuery code, I'm trying to show some fields in a form, but they have to appear only if the user clicks on Yes and hides when he clicks No. This works but when it shows the fields, it mounts them one on top of each other. I'm trying to give it direction, but is not working. Here's my code:
<!DOCTYPE html>
<html>
<head>
<style>
div { background:#def3ca; margin:3px; width:80px;
display:none; float:left; text-align:center; }
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<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> Field #1
<span class="small">Describe your field</span>
</label>
<textarea rows="10" cols="40" name="" id="" ></textarea>
</div>
<div class="mydiv">
<label> Field #2
<span class="small">Describe your field</span>
</label>
<textarea rows="10" cols="40" name="" id="" ></textarea>
</div>
<script>
$("#showr").click(function () {
$("div").first().show("fast", function showNext() {
$(this).next("div").show("fast", showNext);
});
});
$("#hidr").click(function () {
$("div").hide(1000);
});
</script>
</body>
</html>
If somebody has an idea please let me know, thanks
2 answers
solution1
1 2013-04-25 15:13:39
Add this to your style:
.mydiv{ clear:both;}
What do you mean by direction?
solution2
0 ACCPTED 2013-04-25 15:36:05
jsFiddle
To get your desired result including centering, use the following CSS:
.mydiv {
background:#def3ca;
margin: 0 auto;
width:400px;
text-align:left;
clear:both;
display: none;
}
.mytext {
text-align:center;
}
.wrapper {
display:block;
}
With the following markup:
<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>Field #1 <span class="small">Describe your field</span>
</label>
<div class="mytext">
<textarea rows="10" cols="40" name="" class="txtField" id=""></textarea>
</div>
</div>
<div class="mydiv">
<label>Field #2 <span class="small">Describe your field</span>
</label>
<div class="mytext">
<textarea rows="10" cols="40" name="" class="txtField" id=""></textarea>
</div>
</div>
</div>
Notice I added a wrapper around everything and set display: block then in your margin for .mydiv I set it to 0 auto . This allows for centering.
I also worked on your jQuery to improve it a little bit.
$("#showr").click(function () {
$(".mydiv").show("fast");
});
$("#hidr").click(function () {
$(".mydiv").hide(1000);
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.