Nag Nag - 2 months ago 11
CSS Question

Unable to reverse width animate action in jQuery

Here is my problem, i have used jQuery "delegate" to add events on click function.
When user clicks on a div the width increases,but i want to reverse the action i.e width should collapse when user clicks on same div again.

Any other solution to achieve the same would be helpful.
Thanks in advance

Here is my code:



$(document).ready(function() {

var activePanel;
$(activePanel).addClass('active');

$("#accordion").delegate('.panel', 'click', function(e) {
if (!$(this).is('.active')) {
$(activePanel).animate({
width: "43px"
}, 300);
$(this).animate({
width: "265px"
}, 300);
$('#accordion .panel').removeClass('active');
$(this).addClass('active');
activePanel = this;
};
});
});

#accordion {
list-style: none;
margin: 30px 0;
padding: 0;
height: 50px;
width: 355px;
margin: 0 0 0 11px;
overflow: hidden;
}
#accordion .panel {
float: left;
display: block;
height: 50px;
width: 43px;
overflow: hidden;
color: #666666;
text-decoration: none;
font-size: 16px;
line-height: 1.5em
}
#accordion .panel.active {
width: 265px;
}
.panelContent {
padding: 10px 0 0 10px;
width: 79%;
float: left;
}
.panelContent input {
float: left;
width: 86%;
padding: 8px;
border: 1px solid #ccc;
}
.pink {
width: 43px;
height: 50px;
float: left;
cursor: pointer;
}
.last {
border: none;
}
.fa-search {
padding: 5px;
font-size: 37px;
}
.fa-map-marker {
font-size: 42px;
padding: 4px 5px 5px 8px;
}
.fa-share-alt {
padding: 5px;
font-size: 38px;
}
.fa-search:hover,
.fa-map-marker:hover,
.fa-share-alt:hover {
color: #000;
}
.fa-facebook {
padding: 13px 16px;
border-radius: 30px;
color: #fff;
background: #3b5998;
}
.fa-twitter {
padding: 13px;
border-radius: 30px;
color: #fff;
background: #4099FF;
}
.fa-linkedin {
padding: 13px 14px;
border-radius: 30px;
color: #fff;
background: #4875B4;
}
.fa-google-plus {
padding: 13px 11px;
border-radius: 30px;
color: #fff;
background: #C63D2D;
}
.fa-facebook:hover {
background: #284978;
}
.fa-twitter:hover {
background: #388ae9;
}
.fa-linkedin:hover {
background: #006BA1;
}
.fa-google-plus:hover {
background: #ac392a;
}
.p3 {
padding: 5px 0 0 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="accordion">
<div class="panel">
<div class="pink"><i class="fa fa-search" aria-hidden="true"></i>
</div>
<div class="panelContent p1">
<input type="text" placeholder="Search" />
</div>
</div>
<div class="panel">
<div class="pink dark1"><i class="fa fa-map-marker" aria-hidden="true"></i>
</div>
<div class="panelContent p2">
<input type="text" placeholder="Search" />
</div>
</div>
<div class="panel">
<div class="pink dark2"><i class="fa fa-share-alt" aria-hidden="true"></i>
</div>
<div class="panelContent p3">

<a href="#" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
<a href="#" target="_blank"><i class="fa fa-google-plus" aria-hidden="true"></i></a>


</div>
</div>

</div>




Answer

$(document).ready(function(){

var activePanel;
$(activePanel).toggleClass('active');

$("#accordion").delegate('.panel', 'click', function(e){
    if( ! $(this).is('.active') ){
        $(activePanel).animate({width: "43px"}, 300);
        $(this).animate({width: "265px"}, 300);
        $('#accordion').removeClass('active');
        $(this).toggleClass('active');
        activePanel = this;
           } else {
           	$(activePanel).animate({width: "43px"}, 300);
           	$(this).animate({width: "65px"}, 300);
           	$('#accordion').removeClass('active');
           	$(this).toggleClass('active');
           	activePanel = this;
           }
       });
 });
#accordion {
        list-style:none;
       margin:30px 0;
       padding:0;
      height:50px;
     width:355px;
    margin:0 0 0 11px;
    overflow:hidden;
          }
     #accordion .panel {
       float:left;
       display:block;
        height:50px;
        width:43px;
        overflow:hidden;
        color:#666666;
        text-decoration:none;
        font-size:16px;
       line-height:1.5em
       }
       #accordion .panel.active {
         width:265px;
       }
      .panelContent {
         padding:10px 0 0 10px;
       width:79%;
       float:left;
      }
      .panelContent input{float:left;width:86%;padding:8px;border:1px solid         #ccc;}
      .pink {
        width:43px;
        height:50px;
        float:left;
        cursor:pointer;


         }
      .last {border:none;}
      .fa-search{padding:5px;font-size:37px;}
      .fa-map-marker{font-size: 42px;padding: 4px 5px 5px 8px;}
     .fa-share-alt{padding:5px;font-size: 38px;}

     .fa-search:hover,.fa-map-marker:hover,.fa-share-alt:hover{color:#000;}

      .fa-facebook{padding:13px 16px;border-radius:30px;color:#fff;background:#3b5998;}
      .fa-twitter{padding:13px;border-radius:30px;color:#fff;background:#4099FF;}
     .fa-linkedin{padding:13px 14px;border-radius:30px;color:#fff;background:#4875B4;}
     .fa-google-plus{padding:13px 11px;border-radius:30px;color:#fff;background:#C63D2D;}

      .fa-facebook:hover{background:#284978;}
       .fa-twitter:hover{background:#388ae9;}
      .fa-linkedin:hover{background:#006BA1;}
     .fa-google-plus:hover{background:#ac392a;}

     .p3{padding:5px 0 0 10px;}
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
   <div id="accordion">
      <div class="panel">
  <div class="pink"><i class="fa fa-search" aria-hidden="true"></i></div>
  <div class="panelContent p1"> <input type="text" placeholder="Search"/>
  </div>
</div>
<div class="panel">
  <div class="pink dark1"><i class="fa fa-map-marker" aria-hidden="true"></i></div>
  <div class="panelContent p2"> <input type="text" placeholder="Search"/>
  </div>
</div>
<div class="panel">
  <div class="pink dark2"><i class="fa fa-share-alt" aria-hidden="true"></i></div>
  <div class="panelContent p3"> 

    <a href="#" target="_blank"><i class="fa fa-facebook" aria-hidden="true"></i></a>
    <a href="#" target="_blank"><i class="fa fa-twitter" aria-hidden="true"></i></a>
    <a href="#" target="_blank"><i class="fa fa-linkedin" aria-hidden="true"></i></a>
    <a href="#" target="_blank"><i class="fa fa-google-plus" aria-hidden="true"></i></a>


    </div>
  </div>

</div>