Christian Christian - 4 months ago 8
CSS Question

JS CSS Toggle Button doesn't move up

The problem is, my open button doesn't want to go on top after being hidden. It remains in the same position!
https://fiddle.jshell.net/4fs5x0p4/

<script type='text/javascript'>//<![CDATA[
$(function(){
$("#open").toggle(
function () {
$('#navibar').animate({height: "-50px"});
},
function () {
$('#navibar').animate({height: "50px"});
}
);

});//]]>

</script>
<div id="navibar">
<nav>
<ul>
<li><a href="#">WordPress</a>
<ul>
<li><a href="#">Themes</a></li>
<li><a href="#">Plugins</a></li>
<li><a href="#">Tutorials</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div id="open"></div>

Answer

The button remains in the same position because it is not nested/part of the navibar block and because its position is absolute.

I'm guessing you want something like this: https://fiddle.jshell.net/4fs5x0p4/1/

this is the script:

$(function() {
  $("#open").toggle(
    function() {
      $('#navibar').animate({
        height: "-50px"
      }, 800);
      $(this).css("top", "0px");
    },
    function() {
      $('#navibar').animate({
        height: "50px"
      }, 500);
      $(this).css("top", "30px");
    }
  );
});

and I added transition: top 0.5s ease-out; to #open styles. Fine tune the transition and the animation time to your liking.

Comments