Jquery open close div missing something

Question

I am trying to make a click to show div left to right. I have created this DEMO from jsfiddle.net

In this demo you can see there is a green color div. When you click this div then the left div opening left to right.

But at the same time when you click the green button the green button class automatically changing and also the html text is changing. (Click To Show Slide Left In to Close)

So i want to make it when i click the green color div then the left div will open and second time clicked the green div then the left div will close with animate.

How can i do it. What i am missing in my DEMO.

Here is a code:

JS

$(".click_open_close").click(function(){
   var id = $(this).data("id");
    $(".left_in").animate({width:"100%"}, 200).find(".aa").animate({width:"100%"}, 200);
    $(".click_open_close").html("Close");
    $(".r").removeClass("click_open_close");
    $(".r").addClass("pp");
});
$(".pp").click(function(){
   $(".left").animate({width:"0%"},200);
   $(".left_in").animate({width:"0%"},200);      
});

HTML

<div class="test_container">
  <div class="left">
      <div class="left_in"><div class="aa">ss</div></div>
  </div>
  <div class="r click_open_close" data-id="100">Click To Show Slide Left In</div>
</div>

CSS

.test_container{
  display: block;
  position: absolute;
  height: auto;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  max-width: 980px;
  min-width: 300px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-right: auto;
  margin-left: auto;
  background-color: #000;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2);
  -webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px;
  border-radius: 3px;
  -webkit-border-radius: 3px;
  -o-border-radius: 3px;
  -moz-border-radius: 3px;
  min-height: 140px;
}
.left{
  display: block;
  position: absolute;
  float: left;
  width: 30%;
  overflow: hidden;
  padding: 0px;
  bottom: 0;
  top: 0;
  left: 0;
  background-color: red;
  border-right: 1px solid #d8dbdf;
  -webkit-border-top-left-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-bottomleft: 3px;
  border-top-left-radius: 3px;
  border-bottom-left-radius: 3px;
  transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s;
}
.left_in{
  z-index: 999 !important;
  position: absolute;
  float: left;
  width: 0%;
  height: 100%;
  background-color: #f7f7f7;
  opacity: 0;
  -webkit-animation-duration: 0.9s;
  animation-duration: 0.9s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-name: slideLeft;
  animation-name: slideLeft;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
@-webkit-keyframes slideLeft {
  0% {
    -webkit-transform: translateX(25rem);
    transform: translateX(25rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideLeft {
  0% {
    -webkit-transform: translateX(15rem);
    transform: translateX(15rem);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
}
.aa{
        background-color: #f7f7f7;
  /*background-color: #dfdfdf;
  background-image: -webkit-linear-gradient(top,#dddbd1,#d2dbdc);
  background-image: linear-gradient(top,#dddbd1,#d2dbdc);*/
  width: 0;
  top: 0;
   border-radius:0%;
  z-index: 1000;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  position: absolute;
  right:0;
}
.click_open_close{
  right:0px;
  padding:10px;
  color:#fff;
  position:absolute;
  background-color:green;
  cursor:pointer;
}
.pp{
  right:0px;
  padding:10px;
  color:#fff;
  position:absolute;
  background-color:green;
  cursor:pointer;
}

Answer 1

Your pp class is not in the dom when you first add click so you need to use .on:

$(".test_container").on("click", ".click_open_close", function(){
   var id = $(this).data("id");
    $(".left_in").animate({width:"100%"}, 200).find(".aa").animate({width:"100%"}, 200);
    $(".click_open_close").html("Close");
    $(".r").removeClass("click_open_close");
    $(".r").addClass("pp");
});
$(".test_container").on("click", ".pp", function(){
   $(".left").animate({width:"0%"},200);
   $(".left_in").animate({width:"0%"},200);      
});

Updated fiddle

Answer 2

You are just unnecessarily changing the class of your click. Check this DEMO and below code.

Just add HTML data-* attribute to your button to determine the state as below:

<div class="r click_open_close" data-state="close" data-id="100">Click To Show Slide Left In</div>

JS

$(".click_open_close").on('click',function(){
       var id = $(this).data("id");
       var state=$(this).data("state");
       if(state==="close")
       {
           $(this).data("state",'open');
           $(".left_in").animate({width:"100%"}, 200).find(".aa").animate({width:"100%"}, 200);
           $(this).text('Close');
       }
       else
       {
           $(this).data("state",'close');
           $(".left_in").animate({width:"0%"}, 200).find(".aa").animate({width:"0%"}, 200);
           $(this).text('Click To Show Slide Left In');
       }
});

Answer 3

Well, for diversity.. I simplified a lot, despite existing better ways to do this.

But try this:

 var isOpened = false, button = $('.r'), leftDiv = $('.left_in'); button.click(function () { if (isOpened) { close(); } else { open(); } }); function open() { leftDiv.animate({ width: "100%" }, 200).find(".aa").animate({ width: "100%" }, 200); button.text("Close"); isOpened = true; } function close() { leftDiv.animate({ width: "0%" }, 200); button.text("Click To Show Slide Left In"); isOpened = false; } 

 .test_container { display: block; position: absolute; height: auto; bottom: 0; top: 0; left: 0; right: 0; max-width: 980px; min-width: 300px; margin-top: 20px; margin-bottom: 20px; margin-right: auto; margin-left: auto; background-color: #000; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .06), 0 2px 5px 0 rgba(0, 0, 0, .2); -webkit-box-shadow: rgba(0, 0, 0, 0.0588235) 0px 1px 1px 0px, rgba(0, 0, 0, 0.2) 0px 2px 5px 0px; border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; -moz-border-radius: 3px; min-height: 140px; } .left { display: block; position: absolute; float: left; width: 30%; overflow: hidden; padding: 0px; bottom: 0; top: 0; left: 0; background-color: red; border-right: 1px solid #d8dbdf; -webkit-border-top-left-radius: 3px; -webkit-border-bottom-left-radius: 3px; -moz-border-radius-topleft: 3px; -moz-border-radius-bottomleft: 3px; border-top-left-radius: 3px; border-bottom-left-radius: 3px; transition: opacity 2s, width 2s, left 2s, font-size 2s, color 2s; } .left_in { z-index: 999 !important; position: absolute; float: left; width: 0%; height: 100%; background-color: #f7f7f7; opacity: 0; -webkit-animation-duration: 0.9s; animation-duration: 0.9s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-name: slideLeft; animation-name: slideLeft; -webkit-animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } @-webkit-keyframes slideLeft { 0% { -webkit-transform: translateX(25rem); transform: translateX(25rem); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } @keyframes slideLeft { 0% { -webkit-transform: translateX(15rem); transform: translateX(15rem); opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); opacity: 1; } } .aa { background-color: #f7f7f7; /*background-color: #dfdfdf; background-image: -webkit-linear-gradient(top,#dddbd1,#d2dbdc); background-image: linear-gradient(top,#dddbd1,#d2dbdc);*/ width: 0; top: 0; border-radius:0%; z-index: 1000; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; height: 100%; overflow: hidden; position: absolute; right:0; } .click_open_close { right:0px; padding:10px; color:#fff; position:absolute; background-color:green; cursor:pointer; } .pp { right:0px; padding:10px; color:#fff; position:absolute; background-color:green; cursor:pointer; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test_container"> <div class="left"> <div class="left_in"> <div class="aa">ss</div> </div> </div> <div class="r click_open_close" data-id="100">Click To Show Slide Left In</div> </div> 

You can also toggle a class and use CSS transitions and way more options. But for you, regarding your code I tried to simplify it.

Answer 4

I won't correct your Fiddle since jcubic did it but for your information, there is a simpler and cleaner way to achieve what you need by using toggleClass() and CSS transitions. Here is an example :

 $('#button').on('click', function() { $('#banner').toggleClass('unfolded'); }); 

 html, body { position: relative; width: 100%; height: 100%; margin: 0; padding: 0; } .wrapper { position: relative; height: 100%; } .banner { position: absolute; top: 0; right: -140px; transition: right 0.5s; width: 150px; padding: 12px; background-color: #000; color: #fff; } .button { cursor: pointer; font-weight: bold; } .banner.unfolded { right: 0; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="wrapper"> <div class="content"> <h1>Some content</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius iusto, et modi nulla officiis repellat necessitatibus laborum, enim consectetur sunt doloribus tempora esse illum eum incidunt veritatis, quaerat, nostrum eos?</p> </div> <div class="banner" id="banner"> <div class="button" id="button">>></div> <ul> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> <li>Link</li> </ul> </div> </div>