CODEWITHSUNDEEP
jqueryjquery-animateslide
Solona Mead
Solona Mead

Reputation: 71

Slide a div using animate(), hide it

I am trying to animate a div so it slides up, using animate(). This is easy enough, the catch is that I want it to tuck up under the toggle button above it (with higher z-index) and disappear. In other words, I don't want to see the div come up above the button. This would be easy if the button (or something) above it stretched to the edge of the screen, but it doesn't.

I tried using height, but this shortens the div from the bottom up, not the other way around. My code is on Code Pen: http://codepen.io/solona/pen/NqPmpp

<div class='column'>
    <button class='toggle'>Hide Text</button>
    <div class='drawer'>
        <p>Content</p>
    </div>
</div>

.column {
    width: 50%;
    margin: 0 auto;
    background: lightgrey;
    padding: 1em;
}

.toggle {
    width: 100%;
    background: black;
    color: white;
    position: relative;
    z-index: 500;
}

.drawer {
  padding: 1em;
  background: pink;
  position: relative;
}

$(".toggle").click(function() {
    if ($(".drawer").hasClass('open')) {
        $(".drawer").animate({
            'bottom': $(".drawer").height()
        }, 400);
        $(this).html("Show Text");
        $(".drawer").removeClass('open');
    } else if (!$(".drawer").hasClass('open')) {
        $(".drawer").animate({
            'bottom': '0px'
        }, 400);
        $(this).html("Hide Text");
        $(".drawer").addClass('open');
    }
});

Upvotes: 1

Views: 403

Answers (2)

A_nobody
A_nobody

Reputation: 164

Playing with your code on Codepen .. what about this as an option ... 

$(".toggle").click(function() {
  if ($(".drawer").hasClass('open')) {
    $(".drawer").animate({
      'bottom': $(".drawer").height()
    }, 400).animate({
      opacity: 0
    });
    $(this).html("Show Text");
    $(".drawer").removeClass('open');
  } else if (!$(".drawer").hasClass('open')) {
    $(".drawer").animate({
      opacity: 100
    }).animate({
      'bottom': '0px'
    }, 400);
    $(this).html("Hide Text");
    $(".drawer").addClass('open');
  }
});

Upvotes: 0

isherwood
isherwood

Reputation: 61056

Put a wrapper around .drawer that has overflow set to hidden:

.bureau {overflow: hidden;}

Demo

You'll need to tweak padding, etc., to remove the remaining space.

Upvotes: 3

Related Questions