Question

I need to change this script so that I can click on my slideshow-expand down arrow button and have it toggle the height of the box up and down on click. Right now it works on the whole box click but I want it on the arrow because its a slide show and every time you click on the prev or next arrow it toggles the box height

Here is the script:

 $("#slideshow-box").click((function() {
                var i = 0;
                return function() {
                    $(this).animate({
                        height: (++i % 2) ? 166 : 115
                    }, 200);
                }
            })());
            });

Here is the html:

<div id="slideshow-box">
    <div id="slideshow-stage">
       <img src="images/slideshowimage.png">
       <img src="images/slideshowimage2.png">
       <img src="images/slideshowimage3.png">
    </div>

<div id="slideshow-prev"></div>
<div id="slideshow-next"></div>
<div id="slideshow-expand"></div>

and here is the css:

#slideshow-box {
    background-color:#CCC;
    position: absolute;
    top:129px;
    width:883px;
    height:115px;
    overflow:hidden;
    z-index:1;
}

#slideshow-stage {
    position: absolute;
    top:0;
    width:883px;
    height:115px;
    z-index:1;
    margin-left: auto;
    margin-right: auto;
}

#slideshow-stage>img {
    position:absolute;
    left:0;
    top:0;  
}

#slideshow-prev {
    position: absolute;
    top:40px;
    left:10px;
    background-image: url(images/arrows_left.png);
    background-repeat:no-repeat;
    width:22px;
    height:42px;
    opacity: .4;
    z-index:50;
}

#slideshow-prev:hover {
    opacity: 10;
    cursor:pointer;
}

#slideshow-next {
    position: absolute;
    top:40px;
    right:10px;
    background-image: url(images/arrows_right.png);
    background-repeat:no-repeat;
    width:22px;
    height:42px;
    opacity: .4;
    z-index:50;
}

#slideshow-next:hover {
    opacity: 10;
    cursor:pointer;
}

#slideshow-expand {
    background-image: url(images/arrows_down.png);
    background-repeat:no-repeat;
    width:28px;
    height:14px;
    position: absolute;
    bottom:10px;
    left:441px;
    opacity: .4;
    z-index:50;

}

#slideshow-expand:hover {
    position: absolute;
    bottom:10px;
    left:441px;
    opacity: 10;
    cursor:pointer;
}

Answer 1

Have you tried changing:

 $("#slideshow-box").click((function() ...

to

 $("#slideshow-expand").click((function() ...

EDIT

After re-reading you may need to change it to:

 $("#slideshow-expand").click((function() {
    var i = 0;
    return function() {
        $("#slideshow-box").animate({
           height: (++i % 2) ? 166 : 115
           }, 200);
          }
         })());
   });

Notice that the difference here is that we’re not using this, because when you click slideshow-expand, slideshow-box should be animated..