Link Collapsible Widgets together?

[David]

Is it possible to link multiple collapsible div containers together in operation so that only one can be open at a time?

Right now this is how I have it operating. It works, but I'm not sure if this is the best way to accomplish such a thing.

 

onCollapsibleExpand: function(e){
        var thisID = $(this.element).attr("id");
        $(".km-collapsible").each(function(k,v){
            // if not clicked item and is currently visible
            if( ($(this).attr("id") != thisID) && $(this).is(":visible") ){
                $(this).data("kendoMobileCollapsible").collapse();
            }
        });
    },

[Alex Gyoshev]

Hello David,

There is no out of the box support for this, but you can simplify the logic, instead of:

    $(".km-collapsible").each(function(k,v){ 
        // if not clicked item and is currently visible 
        if( ($(this).attr("id") != thisID) && $(this).is(":visible") ){
            $(this).data("kendoMobileCollapsible").collapse();
        }
    });

You can apply the filter in the selector, and call the method directly:

         $(".km-collapsible:visible:not(#" + thisID + ")").kendoMobileCollapsible("collapse");

Regards,
Alex Gyoshev
Telerik

 

 

[David]

ooh. That's nice. I wasn't aware about the ":not" filter.

Thanks for the tip!