Question

I have a div that show 200 px. When I click on a image in the div I want to show 1000px.
Then close to 200px again when clicked once again.

This is my code:

<script type="text/javascript">
$(document).ready(function() {
    // shows the slickbox DIV on clicking the link with an ID of "slick-show"

$('#slickbox').css("height", "200px");      
$('#slick-show').click(function() {
        $('#slickbox').toggle(function () {
    $("#slickbox").css("height", "1000px");
}, function () {
    $("#slickbox").css("height", "200px");
      });
});
return false;

});
</script>

<div id="slickbox" style="height: 1000px;">
<p style="text-align: center;">
<a id="slick-show" href="#"><img src="/ImageVaultFiles/id_468115/cf_69211/Happy_monday14-5.jpg" border="0" alt="Happy_monday14-5" /></a></p>
</div>

The code work but I have to doubleclick every time after the first opening.

Answer 1

You are misusing toggle.

http://api.jquery.com/toggle-event/

Description: Bind two or more handlers to the matched elements, to be executed on alternate clicks.

toggle should only be called once. It will bind click handlers which will trigger on alternating clicks. What you are doing is re-binding click handlers every time you click. What you really want to do is something like this:

$('#slickbox').css("height", "200px");      
$('#slick-show').toggle(function () {
    $("#slickbox").css("height", "1000px");
}, function () {
    $("#slickbox").css("height", "200px");
});