Question

Hello i have the following…

 <span id="second" class="content1" style="width:0px; display:inline-block; overflow:hidden; float: left; white-space:nowrap;">
                    <p style="color:blue; background-color: #b5bdc8;">Camera Reviews</p>
                  </span>
                  <a href="#" class="slide1" style="float: left;"><li class="laptop"></li></a>

and the script is:

$(document).ready(function () {
          $('.slide1').click(function () {
          $('#second').animate({
               width: '120px',
           }, 1000);
       });
 });

The problem is that i want the list to be displayed BLOCK… and work as it is PLUS i want the animation to toggle when i click on the list hide/show

Working code here: http://jsfiddle.net/gVjFs/81/

Answer 1

I’m going to ignore the dodgy markup (<li> inside <span> among other things). You can use toggle() here:

$('.slide1').toggle(function () {
    $('#second').stop().animate({
        width: '120px',
    }, 1000);
}, function(){
    $('#second').stop().animate({
        width: '0',
    }, 1000);
});