CODEWITHSUNDEEP
javascriptjqueryhtmlcss
bonny
bonny

Reputation: 3247

How to slide down to show content of DIV using CSS/jQuery?

I would like to create a slide down button to show the content of a DIV that has no height. I did an example here:

fiddle

I looked for this special form of sliding buttons but all I have found were examples where a DIV and its content has given width and height.

In my example the structure is different to that but it is quiet simple. There are three different divisions. A head with given height, the content div (depends from padding) that should be shown and below that the slider/trigger (also with given height) as a button.

Now I would like click on the trigger that slides down about the height of the content div and finally the content div should be appear.

It would be great if someone could help me out.

Thanks alot.

Upvotes: 1

Views: 4512

Answers (2)

SomeShinyObject
SomeShinyObject

Reputation: 7791

You should try slideToggle() instead (it also helps when jQuery is loaded, but that was probably just an oversight when you made it):

$(document).ready(function () {
    $('.slide').click(function () {
        $(this).prev('.content').slideToggle(500, function () {
            $this = $(this);
            $slide = $('.slide');
            if ($this.is(':visible')) {
                $slide.text('Click to close');
            } else {
                $slide.text('Click to open');
            }
        });
    });
});

fiddle

Upvotes: 2

PSL
PSL

Reputation: 123739

I think this is what you are looking at.

Fiddle

   $(document).ready(function () {
    $('.content').hide(); //hide initialy
    $('.slide').click(function () {
        var $this = $(this);
        // target only the content which is a sibling
        $(this).siblings('.content').slideToggle(200, function () {
            $this.text($(this).is(':visible') ? 'click to close' : 'click to open');
        });

    });
});

Upvotes: 3

Related Questions