<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$("select#choosebook").change(function(){
$(".title").slideDown("medium");
});
</head>
<body>
<div class="booktitle">
<p>
<font color="red">*</font>Book:
<select id="choosebook">
<option>Choose a Book...</option>
<option>Add new Book...</option>
</select>
<div class="title" style="display:none">**
<font color="red">*</font>Title: <input type="text">
</div>
<font color="red">*</font>Page: <input type="text" class="page">
</div>
</body>
</html>
The div with class “title” still takes up space between the “Book:” input and the “Page:” input, even though it’s hidden! Other divs on this web page don’t. How can I make it take up no space until the javascript is activated to slide it down?
Thank you!
EDIT: As requested, here is a screenshot of the problem. I’m trying to get rid of the gap between the Book input and the Title input.
Before the ‘title’ input slides down:

After the ‘title’ input slides down:

And here is my CSS:
<style type="text/css">
@import url("layout.css");
.page {
width: 50px;
}
.URL, .booktitle {
margin-left: 24px;
display:none;
}
.title {
display: none;
}
.newtag {
display:none;
}
.amount, .addtag {
width: 100px;
}
.details {
width: 275px;
}
</style>
If you are talking about the huge space under the Book drop down then that is because of the
ptag that you have open in the HTML but forgot to close it. Theptag is adding the default margin. Hence the space. Remove theptag and the margin should go away.Also as I mentioned in the comments to your question always add a
doctypeto you page.