Q: Separate jQuery click events I a trying to have a div slide out from a hidden position to reveal some toggle buttons and having an issue with the click binding. For the most part it is working but when I click anywhere the clicks are not separated out. When the user clicks on one of the divs, I only want that particular hidden div related to that specific click to slide out. And the user needs to be able to toggle the buttons. Then when they click somewhere else, that hidden div should go away.
Here is the JS and jQuery I am trying and I have to use 1.6.4. I may be able to use 1.7.2 if that would help.
//Handle the animation
$(document).ready(function(){
  $(this).click(function(){
  var hidden = $('.hidden');
  if (hidden.hasClass('visible')){
    hidden.animate({"left":"-1000px"}, "fast").removeClass('visible');
  } else {
    hidden.animate({"left":"0px"}, "fast").addClass('visible');
  }
 });
});

//Handle the toggle for click
  function handleBtnClick(event) {
   event = event || window.event;
   var pressed = event.target.getAttribute("aria-pressed") == "true";

   //change the aria-pressed value as the button is toggled:
   event.target.setAttribute("aria-pressed", pressed ? "false" : "true");
    };
  function handleBtnKeyUp(event) {
   event = event || window.event;
   if (event.keyCode === 32) { // check for Space key
    handleBtnClick(event);
  }
};

Here is the fiddle:
http://jsfiddle.net/S6tQh/2/

A: Please try this code :
//Handle the animation
$(document).ready(function(){
    $(this).click(function(){
    if ($('.hidden').hasClass('visible')){
        $('.hidden').animate({"left":"-1000px"}, "fast").removeClass('visible');
    }
    });

        $('a').each(function(event){

            $(this).click(function(event){
             var hidden = $(this).prev('.hidden');
                 event.preventDefault();
                if (hidden.hasClass('visible')){
                    hidden.animate({"left":"-1000px"}, "fast").removeClass('visible');
                } 

                else {
                    hidden.animate({"left":"0px"}, "fast").addClass('visible');
                }
                event.stopPropagation();
            })
        })
});

//Handle the toggle for click
  function handleBtnClick(event) {
    event = event || window.event;
    var pressed = event.target.getAttribute("aria-pressed") == "true";

    //change the aria-pressed value as the button is toggled:
    event.target.setAttribute("aria-pressed", pressed ? "false" : "true");
     };
  function handleBtnKeyUp(event) {
    event = event || window.event;
    if (event.keyCode === 32) { // check for Space key
      handleBtnClick(event);
    }
  };


A: Please check this
http://jsfiddle.net/LsVQu/1/
Your JQuery code...
//Handle the animation
$(document).ready(function(){
    $(this).click(function(event){
        var el = (event.target || event.srcElement);

        var hidden = $('.'+el.id);
    //var hidden = $('.hidden');
    if (hidden.hasClass('visible')){
        hidden.animate({"left":"-1000px"}, "fast").removeClass('visible');
    } else {
        hidden.animate({"left":"0px"}, "fast").addClass('visible');
    }
    });
});

//Handle the toggle for click
  function handleBtnClick(event) {
    event = event || window.event;
    var pressed = event.target.getAttribute("aria-pressed") == "true";

    //change the aria-pressed value as the button is toggled:
    event.target.setAttribute("aria-pressed", pressed ? "false" : "true");
     };
  function handleBtnKeyUp(event) {
    event = event || window.event;
    if (event.keyCode === 32) { // check for Space key
      handleBtnClick(event);
    }
  };

Your HTML code like below...
<div class="hiddenleft">
   <div style="float:left">
    <button role="button" aria-pressed="false" class="myButton1" onclick="handleBtnClick(event);change();" onKeyUp="handleBtnKeyUp(event)"></button>
    <button role="button" aria-pressed="false" class="myButton2" onclick="handleBtnClick(event);change();" onKeyUp="handleBtnKeyUp(event)"></button>
  </div>
 </div>
<a href="#" class="slide">
 <div class="right" id="hiddenleft">Some Random Div1</div>
 <div class="clear"></div>
 </a>
<div class="hiddenright">
   <div style="float:left">
    <button role="button" aria-pressed="false" class="myButton1" onclick="handleBtnClick(event);change();" onKeyUp="handleBtnKeyUp(event)"></button>
    <button role="button" aria-pressed="false" class="myButton2" onclick="handleBtnClick(event);change();" onKeyUp="handleBtnKeyUp(event)"></button>
  </div>
 </div>
<a href="#" class="slide">
 <div class="right" id="hiddenright">Some Random Div2</div>
 <div class="clear"></div>
 </a>

Your css like below....
html {
    max-width: 360px;
}
.hiddenleft {
    float: left;
    height: 75px;
}
.hiddenleft {
    width: 50%;
    z-index: 2;
    position: absolute;
    left: -1000px;
    background: #f90;
    color: #000;
}

.hiddenright {
    float: left;
    height: 75px;
}
.hiddenright {
    width: 50%;
    z-index: 2;
    position: absolute;
    left: -1000px;
    background: #f90;
    color: #000;
}
.right {
    width: 100%;
    float: right;
    height: 75px;
    background: #000;
    color: #fff;
}
.right:before {
    content: \2605;
}
.clear {
    clear: both;
}
[role="button"] {
 padding:15px 10px;
 border: 1px solid #CCC;
}
 [role="button"][aria-pressed="true"] {
 border: 2px solid #000;
}
h1.hidden {
    visibility: hidden;
}
ariaButton {
    background: #FFFFE0;
    color: #FFFFE0;
    border: none;
}
#ariaButton {
    position: absolute !important;
    clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
    clip: rect(1px, 1px, 1px, 1px);
}
input[type=button] {
    color: #0C0;
 font:2.4em Futura, Century Gothic, AppleGothic, sans-serif;
    font-size: 70%;
    /* ... other rules ... */
    cursor: pointer;
}
input[type=button]:hover {
    color: #000;
    background-color: rgba(255, 255, 255);
}
input[type=button]:active {
    color: #000;
    background-color: rgba(255, 255, 255);
}
#accountName {
    font-size: .5em;
}
#accountName:before {
    content: "\278A";
    color: #000000;
}
.myButton1[role="button"] {
    padding: 15px 10px;
    border: 1px solid #CCC;
    background-color: #CCCCCC;
    color: #FFFFFF;
    width: 65px;
    height: 75px;
    margin-right: -5px
}
.myButton1[role="button"]:before {
    content: "\2605 Button1NoChange";
}
.myButton1[role="button"][aria-pressed="true"] {
    border: 2px solid #000;
    background-color: #666666;
}
.myButton1[role="button"][aria-pressed="true"]:before {
    content: "\2605 Button1IsChange";
}
.myButton2[role="button"] {
    padding: 15px 10px;
    border: 1px solid #CCC;
    background-color: #0C0;
    width: 65px;
    height: 75px;
}
.myButton2[role="button"]:before {
    content: "\2605 Button2NoChange";
    color: #FFF;
}
.myButton2[role="button"][aria-pressed="true"] {
    border: 2px solid #000;
    background-color: #F00;
}
.myButton2[role="button"][aria-pressed="true"]:before {
    content: "\2605 Button2IsChange";
}

Try this may be work for you...

A: Use below code :
//Handle the animation
$(document).ready(function(){
    $(this).click(function(){
    if ($('.hidden').hasClass('visible')){
        $('.hidden').animate({"left":"-1000px"}, "fast").removeClass('visible');
    }
    });

    $('button').click(function(event){
        event.stopPropagation();
    })

        $('a').each(function(event){

            $(this).click(function(event){
             var hidden = $(this).prev('.hidden');
                 event.preventDefault();
                if (hidden.hasClass('visible')){
                    hidden.animate({"left":"-1000px"}, "fast").removeClass('visible');
                } 

                else {
                    hidden.animate({"left":"0px"}, "fast").addClass('visible');
                }
                event.stopPropagation();
            })
        })
});

//Handle the toggle for click
  function handleBtnClick(event) {
    event = event || window.event;
    var pressed = event.target.getAttribute("aria-pressed") == "true";

    //change the aria-pressed value as the button is toggled:
    event.target.setAttribute("aria-pressed", pressed ? "false" : "true");
     };
  function handleBtnKeyUp(event) {
    event = event || window.event;
    if (event.keyCode === 32) { // check for Space key
      handleBtnClick(event);
    }
  };

