Home/ Questions/Q 7702901
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T23:20:04+00:00

I am currently working with sliding tabs. I am implementing the hover function to

  • 0

I am currently working with sliding tabs. I am implementing the hover function to trigger the tab to slide to the left. The only thing is that the tab does slide when the mouse hovers it but it closes right away. I would like for the tab to stay open once the mouse hovers it and the only way to close the tab is to click on the initial “arrow” div. Here is a demo of my work: http://jsfiddle.net/eMsQr/6/

<script language="javascript">
    $(document).ready(function() {
  $("#arrow").hover(
    function(){
      $("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500 );
    },
    function(){
      $("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
    }
  );
});
</script>

<html>
<div style="background-color: rgb(204, 204, 204); height: 300px; width: 300px; overflow: hidden; position: relative;">
    <div id="inner" style="height: 100px; width: 150px; background-color: rgb(0, 204, 102); float: right; margin-right:-150px;" >Form is here</div>

    <div id="arrow" style="height: 100px; width: 50px; background-color: rgb(255, 0, 0); float: right; cursor: pointer; position: absolute; top: 0; right: 0;" >Arrow is here</div>
</div>​
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You mean this? Use mouseenter– and click-event:

    $(document).ready(function() {
  $("#arrow")
    .mouseenter(function(){
      $("#inner").stop().animate({marginRight: "0px", opacity: "1px", height: "100px"}, 500 );
    })
    .click(function(){
      $("#inner").stop().animate({marginRight: "-100px", opacity: "1px", height: "100px"}, 500 );
    });
});

    Also see this example.

    • 0