CODEWITHSUNDEEP
javascriptjquery
user3405976
user3405976

Reputation: 51

Toggle Div on click

I want to modify this code for click event. But I am not able to do so. My requirement is to slide the panel on click (not hover) and again rollback on click (and not mouse out).

HTML

<div id="sidePanel">
    <div id="panelContent">
        <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FWebsTutorial&amp;width=200&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=253401284678598" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:258px;" allowTransparency="true"></iframe>      
    </div>
    <div id="panelHandle"><p>Facebook</p></div>        
</div>

CSS

/* ===== Primary Styles ========================================================
Author: NTechi | WebsTutorial
========================================================================== */
body{
  font-family:Arial;
}

#sidePanel{
  width:245px;
  position:fixed;
  left:-202px;
  top:15%;    
}
#panelHandle{
  background-image: -webkit-linear-gradient(top,#333,#222);
  background-image: -moz-linear-gradient(center top , #333333, #222222);
  background-image: -o-linear-gradient(center top , #333333, #222222);
  background-image: -ms-linear-gradient(center top , #333333, #222222);
  background-image:linear-gradient(center top , #333333, #222222);

  height:150px;
  width:40px;
  border-radius:0 5px 5px 0;
  float:left;
  cursor:pointer;
}
#panelContent{
  float:left;
  border:1px solid #333333;
  width:200px;
  height:300px;
  background-color:#EEEEEE;
}

#panelHandle p {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  color: #FFFFFF;
  font-size: 24px;
  font-weight: bold;
  left: -4px;
  margin: 0;
  padding: 0;
  position: relative;
  top: 26px;
}

JavaScript

jQuery(function($) {
  $(document).ready(function() {
    $('#panelHandle').hover(function() {
        $('#sidePanel').stop(true, false).animate({
            'left': '0px'
        }, 900);
    }, function() {
        jQuery.noConflict();
    });

    jQuery('#sidePanel').hover(function() {
        // Do nothing
    }, function() {

        jQuery.noConflict();
        jQuery('#sidePanel').animate({
            left: '-201px'
        }, 800);

    });
  });
});

Any help would be really helpful. Thanks in advance!

Upvotes: 0

Views: 132

Answers (3)

BenEgan1991
BenEgan1991

Reputation: 637

It can easily be done using .toggle()

Here is the updated code:

jQuery(function($) {
    $('#panelHandle').toggle(function() {
        $('#sidePanel').animate({
            'left': '0px'
        }, 900);
    }, function() {
        $('#sidePanel').animate({
            'left': '-202px'
        }, 900);
    });
});

Upvotes: 0

frikinside
frikinside

Reputation: 1244

Simple way to do this. Change the hover event to toggle event. Using your jsfiddle it would be something like this:

$(document).ready(function() {
    $('#panelHandle').toggle(function() {
        $('#sidePanel').stop(true, false).animate({
            'left': '0px'
        }, 900);
    }, function() {
        jQuery.noConflict();
        jQuery('#sidePanel').animate({
            left: '-201px'
        }, 800);
    });
});

Upvotes: 0

Ankur Aggarwal
Ankur Aggarwal

Reputation: 3101

Use Toggle API Instead http://api.jquery.com/toggle-event/

$('#panelHandle').toggle(function() {
    $('#sidePanel').stop(true, false).animate({
        'left': '0px'
    }, 900);
}, function() {
      jQuery('#sidePanel').animate({
        left: '-201px'
    }, 800);
});

Fiddle: http://jsfiddle.net/GPdFk/4812/

Upvotes: 1

Related Questions