CODEWITHSUNDEEP
jqueryslidetoggle
Francesca
Francesca

Reputation: 28118

jQuery slide toggle, div moves position after first toggle

Weird one here.

Slide toggle works correctly first time it is toggled on/off. Second time, the div moves off the page.

See live example here. Bottom link in corner, open and close a few times.

    <!-- Basket overlay -->
<div id="basketHolder">
    <div class="basketButton">
        <a href="">Your Shopping Bag</a>
    </div>
    <div class="basket">
        <p>test</p>
    </div>
</div>   

$(document).ready(function(){
  $(".basketButton").click(function(e){
      e.preventDefault();
    $(".basket").slideToggle("slow");
  });
});

/* Basket */
#basketHolder {
    position:fixed;
    bottom:25px;
    right:25px;
    padding-top:67px;
}
.basketButton{
    position:absolute; top:0; right:0;
    /*background-image:url('images/pinkbag.png');*/
    background:red;
    padding-left:60px;
    display:inline-block;
    background-repeat: no-repeat;
    height: 67px;
}

.basketButton a{
    white-space:nowrap;
    font-weight:bold;
    font-size:18px;
    color: #67062F;
    padding-top:15px;
    display:inline-block;
}

.basket{
    display:none;
    width:250px;
    height:200px;
    padding:10px;
    border-radius:5px;
    /*background-image:url('images/pink-bg.png');*/
    background:blue;
}


.basket h3{
    color:#FFF;
}

Upvotes: 0

Views: 1392

Answers (1)

mrida
mrida

Reputation: 1157

change basketButton class as follows:

.basketButton{
    width:270px;
    position:relative; 
    text-align:right;
    /*background-image:url('images/pinkbag.png');*/
    background:red;
    display:inline-block;
    background-repeat: no-repeat;
    height: 67px;
}

Upvotes: 1

Related Questions