Toggle script need to be changed

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;
}

Chase · Accepted Answer · 2012-05-09T14:58:00.550

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..

edited May 09 '12 at 14:58

answered May 09 '12 at 14:49

Chase

29,019
1
49
48

This might just work and if it does you are a genius and then you can be more of a genius if you can help me get my arrow image to point up and down on click to indicate which direction it will go – benlevywebdesign May 10 '12 at 21:20
Try taking a look at this post, it should help. Basically, you want to animate the arrow and do a transform of 90 degrees. – Chase May 10 '12 at 21:58
Sorry, I thought I had included it: http://stackoverflow.com/questions/5462275/animate-element-transform-rotate – Chase May 10 '12 at 22:25
How would I at the same time toggle an overlay that shows behind the slideshow putting focus on the pictures and not whats in the background? – benlevywebdesign May 11 '12 at 16:51

Toggle script need to be changed

1 Answers1