Collapse Function

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
IMPORTANT NOTE!!

DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.



PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
wwonderfull
 
 
Posts: 1255
Joined: Fri Aug 21, 2020 8:27 am

Collapse Function

Post by wwonderfull »

How to do a collapse function in WWB. I see a just toggle option which (fade shows hides) in (Action) in Events but is there a way to do toggle Collapse (expand and collapse).
Last edited by wwonderfull on Sat Jun 18, 2022 3:21 pm, edited 1 time in total.
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Collapse Function

Post by Pablo »

The accordion implements collapse functionality.
Also, you can use the show/hide events to 'collapse' elements.
wwonderfull
 
 
Posts: 1255
Joined: Fri Aug 21, 2020 8:27 am

Re: Collapse Function

Post by wwonderfull »

How to make the toggle collapse smooth like these meaning the div over or under it just smoothly goes up and smoothly goes down just like we see in responsive menus.
Expected Example:
https://infoguides.wtamu.edu/bootstrap/collapsebutton

Below image is the way WWB does the collapse.
Image
Last edited by wwonderfull on Sat Jun 18, 2022 5:51 pm, edited 1 time in total.
User avatar
Pablo
 
Posts: 21575
Joined: Sun Mar 28, 2004 12:00 pm
Location: Europe
Contact:

Re: Collapse Function

Post by Pablo »

You can use events for this: show with effect
wwonderfull
 
 
Posts: 1255
Joined: Fri Aug 21, 2020 8:27 am

Re: Collapse Function

Post by wwonderfull »

Pablo wrote: Sat Jun 18, 2022 5:35 pm You can use events for this: show with effect
Collapse uses JavaScript and it also has a smooth css transition

I was trying a more like a Themeable menu or Accordion type of collapse kind of thing when clicking button the div would do transition of the height.

Written in getbootstrap. com
https://getbootstrap.com/docs/5.2/components/collapse/
Sass
Variables

$transition-collapse: height .35s ease;
$transition-collapse-width: width .35s ease;
Classes
Collapse transition classes can be found in scss/_transitions.scss as these are shared across multiple components (collapse and accordion).


.collapse {
&:not(.show) {
display: none;
}
}

.collapsing {
height: 0;
overflow: hidden;
@include transition($transition-collapse);

&.collapse-horizontal {
width: 0;
height: auto;
@include transition($transition-collapse-width);
}
}
so instead of slide in slide out effect can this exact div height Collapse be done using toggle event along with transition?
Post Reply