Float property interfering with .toggle .fadeOut
This is my first post and I'm a beginning developer.
If I apply a float property to <a> elements contained in a <div> that I want to toggle to hide and show when the <h2> is clicked, the element will show but will not hide again. When the float property is removed, it functions as intended.
Thanks in advance, the meat of the code follows.
The jQuery;
$(document).ready(function( ) {
$('.chapter').hide();
$('#main h2').toggle(
function() {
$(this).next('.chapter').fadeIn();
$(this).addClass('close');
},
function() {
$(this).next('.chapter').fadeOut();
$(this).removeClass('close');
}
); // end toggle
-----------------------------------------------------------
The HTML;
<div id="main">
<h2>Chapter 1</h2>
<div class="chapter">
<div class="gallery">
<a href="images/large/Grandpa-Joes.jpg"><img src="images/small/Grandpa-Joes.jpg" width="133" height="100" alt="Grandpa-Joes"></a>
<a href="images/large/Tattoos.jpg"> <img src="images/small/Tattoos.jpg" width="133" height="100" alt="Tattoos"> </a>
</div>
</div>
</div>
-----------------------------------------------------------
The CSS;
.gallery a {
padding: 5px;
border: 1px solid #A7A37E;
display: block;
float: left;
width: 133px;
margin-top: 10px;
margin-bottom: 20px;
margin-left: 20px;
}
.gallery img {
display:block;
}