Member Avatar for Surfsup

When the cursor enters div.round I want div#expand to appear. This is happenning fine. When I remove my cursor I want the div#expand to remain visible - this is also working. Then to close div#expand I want to click a#one - this is the bit that's not working with my code at the moment. What happens is that the div#expand slides up out of view and then bounces back out again. I just need it to stay closed until the user decides to hover onto the div.round again.

Using jQuery.

Thanks

Dan

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>

<script type="text/javascript">
$(document).ready(function(){
    $("#expand").hide();
    $(".round").hover(
        function(){ $("#expand").slideDown(); },
        function(){ $("#expand").slideDown(); }
    );
});
$(document).ready(function(){
  $("#one").click(function(){
    $("#expand").slideUp("slow");
	 return false;
  });
});
</script>

                <div class="round">
                    <p>Content here visible from start... <span class="ap-link"><a id="one" href="#expand">Show / hide full content </a></span></p>
                    <div id="expand"><p> ...the rest of content is here.</p></div>
                </div>
</body>
</html>
  • 2 Contributors
  • 1 Reply
  • 187 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by AleMonteiro
Member Avatar for AleMonteiro

Your HTML structure don't let you do it. a#one is inside div.round, so every time you click a#one, you are mousing over div.round.

The best way is to modify your HTML with that in mind.

One way to do it, is this:

$(document).ready(function(){
    $("#expand").hide();
    $("#open").mouseover(
        function(){ $("#expand").slideDown(); }
    );
	$("#one").click(function(){
		$("#expand").slideUp("slow");
		 return false;
	  });
});
</script>
	<div class="round">
		<p><span id="open">Content here visible from start...</span><span class="ap-link"><a id="one" href="#expand">Show / hide full content </a></span></p>
		<div id="expand"><p> ...the rest of content is here.</p></div>
	</div>
</body>

But there is a lot of another ways too.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.