I had a toggle jQuery issue that was partially resolved with assistance from this platform, but one bug remains lingering.
The problem arises when hovering over "more information," causing a child div to slide down. If you move the cursor away before the .panel finishes sliding down, the next time you hover over "more information" it fails to slide down completely.
I have another question to ask, which I believe requires a separate post.
Staging page URL:
This issue seems somewhat similar to another problem, although I don't entirely comprehend it:P like this: jquery toggle sometimes does not work
jQuery:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".flip").mouseenter(function(){
$(this).find(".panel").stop().slideToggle("slow");
});
$(".flip").mouseleave(function() {
$(this).find(".panel").stop().slideToggle("slow");
});
});
</script>
CSS:
.flip{
cursor: pointer;
background-color:white;
width:490px;
margin-left: 43px;
color:#1667b2;
text-align:center;
border-bottom: 2px solid #1667b2;
display:block;
}
.panel
{
width:480px;
color:white;
background-color:#1667b2;
float:left;
margin:0px;
display:none;
padding:5px;
}
#meerreferenties {
width:auto;
float:left;
margin-top:10px;
}
HTML:
<div class="flip"><p>More information</p>
<div class="panel"><p>This is where the information about the respective hosting will appear.
This is where the information about the respective hosting will appear.
This is where the information about the respective hosting will appear.
This is where the information about the respective hosting will appear.
This is where the information about the respective hosting will appear.
This is where the information about the respective hosting will appear.
This is where the information about the respective hosting will appear.</p>
</div>
</div>