Link Collapsible Widgets together?

3 posts, 0 answers
  1. David
    David avatar
    27 posts
    Member since:
    Jun 2014

    Posted 08 Apr 2015 Link to this post

    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();
                }
            });
        },

  2. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 10 Apr 2015 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. David
    David avatar
    27 posts
    Member since:
    Jun 2014

    Posted 10 Apr 2015 in reply to Alex Gyoshev Link to this post

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

    Thanks for the tip! 

Back to Top