CODEWITHSUNDEEP
jquerycsshtmljquery-animate
ole
ole

Reputation: 1

jquery toggle effect

I'm new to jquery and I'm trying to make a dropdown effect, but I want to click on the div again so it slide up again :) How can i do that?

<script type="text/javascript">
    $(function() {
        $('#panel').click(function() {
            $(this).animate({
                'height' : '500px'
            },1000);
            $('#demo').fadeIn(500);
        });
    });
</script>

<div id="panel">Hej med dig</div>

Upvotes: 0

Views: 2139

Answers (3)

Joko Wandiro
Joko Wandiro

Reputation: 1987

You can check it in my demo. I grab initial value of height panel and use condition to define what height i use for animate method.

    $panel= $('#panel');
    init_height= $panel.css('height'); // grab initial value of height when DOM is ready
    $('#panel').click(function() {
        cur_height= $(this).css('height');
        (cur_height == '500px') ? height= init_height : height= '500px'; // conditional statement to define height for animate method;

        $(this).animate({
            'height' : height
        },1000);
        $('#demo').fadeIn(500);
    });

Hope it help you

DEMO

Upvotes: 0

a.stgeorge
a.stgeorge

Reputation: 304

To be through you are going to want to wrap the entire slide function within the DOM ready jQuery function and utilize the noConflict method as well. This will ensure that the slide up and down will not be actionable until the entire document has loaded and the no conflict will ensure that it wont conflict with any other JS libraries or custom scripts you may have in place.

var $i = jQuery.noConflict();
$i(document).ready(function() {
  $i('#panel').click(function() {
    $i('#demo').slideToggle('slow');
  });
});

Note that the slide toggle function in jQuery 1.4.3 has some additional arguments that can be passed.

.slideToggle( [ duration ], [ easing ], [ callback ] )
**duration** - string or number determining how long the animation will run.
**easing** - string indicating which easing function to use for the transition.
**callback** - function to call once the animation is complete.

You can learn more about the slideToggle(); function and see real examples here:

jQuery .slideToggle();

Upvotes: 0

David Thomas
David Thomas

Reputation: 253506

I think:

$('#panel').click(
    function(){
        $(this).slideToggle(1000);
        $('#demo').fadeToggle(500);
    });

is what you're looking for.

References:

  1. slideToggle(),
  2. fadeToggle().

Edited

Given that your mark-up is, essentially:

<div id="panel">Hej med dig
    <div id="demo">Jeg er demo</div>    
</div>

The following jQuery should probably work more appropriately:

$('#panel').click(
    function(){
        $('#demo').slideToggle(500);
    });

JS Fiddle demo.

Upvotes: 4

Related Questions