CODEWITHSUNDEEP
jqueryslidetoggle
Osirisx3r0
Osirisx3r0

Reputation: 1

jquery dynamic slideToggle

I am using the SilverStrips CMS. My goal is to create a dynamic series of divs that start out collapsed that have links used to expand them. I'm trying to use the jQuery slideToggle() function and having an issue getting it to work properly in function form. Here's what I have.

head tag:

$(document).ready(function(){
    (function($){
        $.fn.collapse = function(itemid){
            $(itemid).slideToggle();
        };
    })(jQuery);
});

And i have set the links to have an onclick event that calls the function collapse() with the dynamically generated id as so:

<h3><a href"javascript:void(0)" onclick="collapse(div#itemid)">$Title</a></h3>

I'm not sure if I have formatted my function correctly or not.

Upvotes: 0

Views: 577

Answers (2)

VIDesignz
VIDesignz

Reputation: 4783

I think your problem lies here

<h3><a href"javascript:void(0)" onclick="collapse(div#itemid)">$Title</a></h3>

I believe it should be

<h3><a href="javascript:void(0)" onclick="collapse('div#itemid')">$Title</a></h3>

Make sure your initial CSS does not have

{height:0px;}

it should have

{display:none;}

instead or the toggle won't know what to toggle the height to.

Also, why not create your function like this?

$(document).ready(function(){

    function collapse(itemid){
        $(itemid).slideToggle();
    };

});

Upvotes: 0

James Montagne
James Montagne

Reputation: 78650

The way that you are creating that function, you would need to call it like so:

$("any selector here").collapse("div#itemid")

This is likely not what you want. Instead, try this:

    $.fn.collapse = function(){
        $(this).slideToggle();
    };

Then it can be called like so:

$('div#itemid').collapse()

http://jsbin.com/ozacoq/1/edit

Ideally, you should also consider not attaching your handlers inline. Something like this:

$("a.somelink").click(function(){
    $('div#itemid').collapse();
});

Upvotes: 1

Related Questions