Page 1 of 1
Collapse Function
Posted: Sat Jun 18, 2022 3:15 pm
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).
Re: Collapse Function
Posted: Sat Jun 18, 2022 3:21 pm
by Pablo
The accordion implements collapse functionality.
Also, you can use the show/hide events to 'collapse' elements.
Re: Collapse Function
Posted: Sat Jun 18, 2022 5:19 pm
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.
Re: Collapse Function
Posted: Sat Jun 18, 2022 5:35 pm
by Pablo
You can use events for this: show with effect
Re: Collapse Function
Posted: Thu Mar 23, 2023 10:40 am
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?