CODEWITHSUNDEEP
jquerycss
Yasser Alwan
Yasser Alwan

Reputation: 27

Slide out div by clicking another div

I've created two div's upon clicking arrow shaped div, it would slide out the hidden div. Similar to one of the fiddles posted on the forum. for some reason it is not working.

This is what I've done so far: Fiddel any help is highly appreciated.

html

<div id="slideout">
<div id="containclickme">
    <div class="metro three-d" id="click-me"></div>
</div>
</div>

css

 body {
direction:rtl;
}
#slideout {
background: #666;
position: relative;
width: 300px;
height: 80px;
right:-300px;
margin-top:50px;
top:100%;
bottom:100%;
}
.metro {
display: inline-block;
padding: 5px;
margin: 50px;
width:1px;
height:19.5px;
background: #117ebb;
color: white;
font-weight: bold;
text-decoration: none;
}
.metro.three-d {
position: relative;
box-shadow: 1px 1px #003355, 2px 2px #003355, 3px 3px #003355;
transition: all 0.1s ease-in;
}
.metro.three-d:active {
box-shadow: none;
top: 3px;
left: 3px;
}
.metro.three-d:after {
 transition: all 0.1s ease-in;
position:absolute;
top:0px;
left:-13px;
content:" ";
width: 0;
height: 2px;
border-top: 13px solid transparent;
border-bottom: 15px solid transparent;
border-right:13px solid #117ebb;
border-radius:0px 0px 0px 20px;
}
#containclickme {
background: transparent;
float:left;
height:100%;
bottom:100%;
width:20px;
margin-top:-25px;
}
#click-me {
position:right;
left:30px;
}

jquery

 $(function () {
 $("#clickme").toggle(function () {
    $(this).parent().parent().animate({
        right: '0px'
    }, {
        queue: false,
        duration: 500
    });
 }, function () {
    $(this).parent().parent().animate({
        right: '-300px'
    }, {
        queue: false,
        duration: 500
    });
  });
 });

Upvotes: 0

Views: 7780

Answers (2)

Fresheyeball
Fresheyeball

Reputation: 30015

You were very close ;)!

http://jsfiddle.net/zxu7w/

$(function () {
    // cache the sliding object in a var
    var slideout = $('#slideout');
    // "click-me" is what is in your html not "clickme"
    $("#click-me").toggle(function () {
        // use cached object instead of searching
        slideout.animate({
            right: '0px'
        }, {
            queue: false,
            duration: 500
        });
    }, function () {
        // use cached object instead of searching        
        slideout.animate({
            right: '-300px'
        }, {
            queue: false,
            duration: 500
        });
    });
});

Upvotes: 1

ebram khalil
ebram khalil

Reputation: 8321

it's not working because of the wrong id you use

you used $("#clickme")

it should be $("#click-me")

check your code again with that change it 'll work like charm

Upvotes: 0

Related Questions