• Resolved wattanboy

    (@wattanboy)


    Hi community!

    I am coming with a suggestion rather than a question.

    I had 3 requirements for the collapsing functionality:
    1) work as a toggle (just as the basic [expand][/]
    2) header (the button) must be separated from the content being displayed
    3) no arrow next to the trigger

    I couldn’t quite find any solution for my task as:
    expandall/collapseall do not fulfill (1)
    external trigger does not do the (3)

    It may be due to my poor reading skills ?? but I decided the fastest way would be to merge some of the existing functionalities.

    As a solution to my narrow scenario, I created this piece of copypasting. It uses the expandall / collapseall logic, except it is just merged into one button ( rel attribute being used each time ).

    What do you guys think about it?
    I’d like to emphasize I am not 100% familiar with collapse o matic capabilities.

    Anyway, I think there should be a toggleall class completing the expandall / collapseall .

    Do you plan on adding anything like this to the main plugin?

    Martin

    jQuery(document).on(com_binding, '.toggleall', function(event) {
    		
    		if (jQuery(this).hasClass('ok')) {
    			
    		if(jQuery(this).attr('rel') !== undefined){
    			var rel = jQuery(this).attr('rel');
    			var loop_items = jQuery('.collapseomatic.colomat-close[rel="' + rel +'"]');
    		}
    		else if(jQuery(this).attr('data-togglegroup') !== undefined){
    			var toggroup = jQuery(this).attr('data-togglegroup');
    			var loop_items = jQuery('.collapseomatic.colomat-close[data-togglegroup="' + toggroup +'"]');
    		}
    		else {
    			var loop_items = jQuery('.collapseomatic.colomat-close');
    		}
    		jQuery(this).removeClass("ok")
    		
    		colomat_collapseall(loop_items);
    	}
    		
    		else {
    		
    		if(jQuery(this).attr('rel') !== undefined){
    			var rel = jQuery(this).attr('rel');
    			var loop_items = jQuery('.collapseomatic:not(.colomat-close)[rel="' + rel +'"]');
    		}
    		else if(jQuery(this).attr('data-togglegroup') !== undefined){
    			var toggroup = jQuery(this).attr('data-togglegroup');
    			var loop_items = jQuery('.collapseomatic:not(.colomat-close)[data-togglegroup="' + toggroup +'"]');
    		}
    		else{
    			var loop_items = jQuery('.collapseomatic:not(.colomat-close)');
    		}
    		jQuery(this).addClass("ok")
    		colomat_expandall(loop_items);
    	}});
Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter wattanboy

    (@wattanboy)

    Oh I forgot, my solution is really retarded and case specific, prob wouldn’t paste it into official yet ??

    Plugin Author twinpictures

    (@twinpictures)

    the collapse/expand all toggle is a bit more complex because the toggle trigger needs to track the state of each element in the group and change dynamically.

    We built this feature into Collapse-Pro-Matic, as it’s a more advanced use case.

    But thank you for sharing your feedback and code sample!
    Issue marked as resolved.

    • This reply was modified 4 years, 3 months ago by twinpictures.
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Adding toggle all to expandall/collapseall’ is closed to new replies.