CODEWITHSUNDEEP
javascriptjqueryhtmlcss
alex
alex

Reputation: 7601

Toggling the bottom property of parent div

I want to toggle the bottom property of a div by clicking it's child anchor tag:

<div class="nav" :class="{ 'full-width': isFullWidth }">
    <a class="toggle-button" @click="toggleNav"><i class="fa fa-angle-down"></i></a>
</div>


$('.toggle-button').click(function () {
    $(this).parent().animate({ bottom: 0 }, 200)
}, function () {
    $(this).parent().animate({ bottom: -30 }, 200)
})

Right now, I have to click a second time for the bottom property to change and after that nothing happens if I click again.

What am I doing wrong?

Upvotes: 1

Views: 26

Answers (1)

Rory McCrossan
Rory McCrossan

Reputation: 337560

Your logic is flawed as the click() event handler only accepts a single function. Instead you should include a single handler and toggle the bottom property based on its current value. Try this:

$('.toggle-button').click(function () {
    var bottom = parseInt($(this).css('bottom'), 10) == 0 ? -30 : 0;
    $(this).parent().animate({ bottom: bottom }, 200)
});

Upvotes: 2

Related Questions