<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 issue as described is that the hidden div with the class "title" occupies space even when it is invisible due to being hidden. The goal is to eliminate this space until the JavaScript function slides it down. How can this be achieved on the web page?
Thank you!
EDIT: Here is a screenshot provided showing the problem, where there is unwanted spacing between the Book input and the Title input. Before the 'title' input slides down: After the 'title' input slides down:
Additionally, here is the CSS for reference:
<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>