JQuery with .toggle .css

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.

check out this Question on stackoverflow, may be this help you. — khurram
– khurram, Commented May 11, 2012 at 13:45

Hadi Mostafapour · Accepted Answer · 2012-05-11 13:41:47Z

3

this becuase you attach toggle function after click on element, avoid .click:

   $(function() {
        // shows the slickbox DIV on clicking the link with an ID of "slick-show"

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

answered May 11, 2012 at 13:41

Hadi Mostafapour

2,3162 gold badges15 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

James Montagne · Accepted Answer · 2012-05-11 13:41:28Z

2

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

answered May 11, 2012 at 13:41

James Montagne

78.9k14 gold badges115 silver badges132 bronze badges

Comments

ben author · Accepted Answer · 2012-05-11 13:42:45Z

1

The .click() and .toggle() are redundant -- .toggle() assumes someone's going to be clicking on an element. See description in docs: "Bind two or more handlers to the matched elements, to be executed on alternate clicks." Just leave out the .click() and you'll get the behavior you want..

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

answered May 11, 2012 at 13:42

ben author

2,9532 gold badges29 silver badges44 bronze badges

Comments

Imdad · Accepted Answer · 2012-05-11 13:36:22Z

0

Use CSS class for different styles or widths or heights or anything

and then use

http://api.jquery.com/toggleClass/

for toggling any style

answered May 11, 2012 at 13:36

Imdad

6,0424 gold badges37 silver badges53 bronze badges

1 Comment

user1389517 Over a year ago

We are locked to a useless cms that makes is a pain in the a** to use classes in javascripting.

izolate · Accepted Answer · 2012-05-11 13:49:42Z

0

Yup, your toggle function is incorrect. Here's a working example:

http://jsfiddle.net/LsdUQ/

answered May 11, 2012 at 13:49

izolate

1,6004 gold badges22 silver badges37 bronze badges

Collectives™ on Stack Overflow

JQuery with .toggle .css

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related