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
  • 201 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by AleMonteiro

Dani AI

Generated

Quick diagnosis: the panel re-opens because the hover logic and the in-line close link fight each other. In the original snippet the hover handler causes the panel to be shown on hover events, and the close link lives inside that same hovered area, so mouse events triggered by the click can retrigger the show. As suggested, moving the open/close trigger outside the hovered region is the simplest HTML fix and avoids the conflict entirely.

If changing markup is not desired, a small, robust JavaScript approach works reliably: only open on a deliberate mouseenter, use .stop(true,true) to avoid queued animations, and suppress any immediate hover that follows a manual close (treat that first hover as the click artifact and ignore it). The snippet below implements a short “suppress after manual close” window so a close click cannot cause an instant reopen, while still allowing the next real hover to open the panel.

$(function(){
  var $expand = $('#expand').hide();
  var lastManualClose = 0;
  var SUPPRESS_MS = 250;

  $('.round').on('mouseenter', function(){
    var now = Date.now();
    if (now - lastManualClose < SUPPRESS_MS) {
      // ignore hover events that happen immediately after manual close
      lastManualClose = 0;
      return;
    }
    $expand.stop(true, true).slideDown();
  });

  $('#one').on('click', function(e){
    e.preventDefault();
    e.stopPropagation();
    lastManualClose = Date.now();
    $expand.stop(true, true).slideUp();
  });
});

Quick checklist and notes: remove or avoid fragment href="#expand" (use href="#" + preventDefault or use a <button type="button">) to prevent scrolling/jump side-effects; prefer a semantic button for accessibility and toggle an aria-expanded attribute when opening/closing; and keep animations controlled with .stop(true,true) to prevent the “bounce” from queued slides.

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.