Modal open and collapse all

Wappler General Need Help
1

Looking for some ideas here, does anyone know if there is a Wappler way to collapse everything when opening a modal.

Example I open a modal for the first time, inside it all collapse elements are collapsed, i click a button which opens the collapse element. I close down the modal. I open a different record to view its details, and the collapse are is already opened because the last time the modal was open on another record it was open. Looking for a way to always start with a clean collapsed modal on open.

2

on modal open run a flow -> run javascript and call collapse(‘hide’) for all your collapses

Before the end body tag add a script

<script src="bootstrap/5/js/bootstrap.bundle.min.js"></script>

    <script>

        function closeCollapses() {                

            $('#collapseGeneral').collapse('hide');

            $('#collapseMeasure').collapse('hide');

            $('#collapseImages').collapse('hide');

            $('#collapseStatus').collapse('hide');

            $('#collapseDetails').collapse('hide');

        }

        function expandCollapses() {

            $('#collapseGeneral').collapse('show');

            $('#collapseMeasure').collapse('show');

            $('#collapseImages').collapse('show');

            $('#collapseStatus').collapse('show');

            $('#collapseDetails').collapse('show');

        }

     

    </script>

</body>
1 Like
3

and the modal dmx-on:show-bs-modal…

<div class="modal" id="modal1" is="dmx-bs5-modal" tabindex="-1" dmx-on:show-bs-modal="run({runJS:{function:'closeCollapses',name:'cls',outputType:'text'}})">

(or attach it on a button click that open the modal)

image
image1657×895 63.5 KB

1 Like
4

You can use the Modal Show Dynamic Event to collapse the elements…

image
image753×356 13.5 KB

image
image847×1011 47.7 KB

and then a button to show them all…

image
image919×1083 52.2 KB

On modal open…

image

On button click.

image

And on open again…
image

1 Like
5

Or you might prefer putting those actions on the ‘hidden’ attribute for the modal so they’re collapsed at the time it’s closed and is just after so nothing is seen. I generally do a form reset action on modal ‘hidden’ attribute so it’s all tidy the next time it opens.

2 Likes
6

Now I saw that I didn’t talk about what you need…

You can just collapse all the dynamic collapses on the modal’s hide dynamic event:
dmx-on:hide-bs-modal="collapse1.hide();collapse2.hide()"

image
image798×847 32.4 KB

I tried to handle it dynamically (in case that you have a looot of collapses) with a variable but I couldn’t find the way without using javascript (pure UI)…
Perhaps you could use an accordion

1 Like
7

Thanks all for the many suggestions, appreciate it, @famousmag, your way is kind of similar to how i had it, and i was wondering if there was a better, more Wappler UI way to do it, in other way like the way @Heather_Mann showed, which to be honest is what i was looking for, but was not showing me those options in the UI at all.
I have now actually opened a blank page and all the options like Heathers do indeed show up, so it must have just been not liking my one inside a view, inside a condition, inside a modal etc. probably just got a little confused.

Thanks again all, working great now

1 Like
8

I think @sitestreet is correct that putting them in the hidden event rather than the open would be better.

9

Agreed, it is better as per @sitestreet suggestion.