CODEWITHSUNDEEP
jquerytwitter-bootstrap
Sean King
Sean King

Reputation: 55

SlideUp function not working but element removed correctly. Any ideas?

Working on a bootstrap website at the moment and trying to make it so that on the click of a button an element slides up. I'm using a function that i've used the past but it doesn't seem to be working. The element gets removed correctly but doesn't slide up at all. Any help would be appreciated!

EDIT:

Just to clarify the element with the purple background is supposed to slide up after clicking "read more".

<div class="container-fluid fill">
            <div class="row main-row fill">
                <div class="main-col col-lg-5">
                    <h1 class="main-title">Breathtaking Journey To Well Being</h1>
                    <p class="main-text">Daimler and unycom started a primising partnership to broaden the visionary horizon of a company that defines inovation.
                    </p>
                    <div class="btn btn-default main-button btn-clr" id="menu-toggle">View Packages</div>
                    <div  class="btn btn-default btn-clr read-more" id="anna-toggle">Read More</div>
                </div>
                <div class="col-lg-6 fill color" id="lol">
                    <h1 class="main-title">Breathtaking Journey To Well Being</h1>
                    <p class="main-text">Daimler and unycom started a primising partnership to broaden the visionary horizon of a company that defines inovation.
                    </p>
                    <a href="" class="btn btn-default main-button btn-clr">View Packages</a>
                    <a href="" class="btn btn-default btn-clr read-more">Read More</a>
                </div>
            </div>
 </div>


$("#anna-toggle").click(function() {
     $("#lol").slideUp(700,  function() { $(this).remove(); });
});

https://jsfiddle.net/4u9qow2h/1/

Upvotes: 0

Views: 38

Answers (1)

Eric Guan
Eric Guan

Reputation: 15992

https://jsfiddle.net/4u9qow2h/3/

Right here is the problem

.fill { 
    min-height: 100%; <-- 
    height: 100%;
}

Your not allowing this element to be less than 100% height, so it causes jQuery to screw up. I removed it in the jsFiddle so you can see how it's working.

Upvotes: 1

Related Questions