How to combine collapse and swap

[blockhunts]

I want to create a hamburger button that, when it got clicked, it will unhide a list of menu below, and hide it again when it got clicked for the second time.

Can it be done using combination of swap and collapse component?
All help is appreciated :)

[saadeghi]

You need JS to do that.
Instead of using checkboxes, you can control swap by adding/removing swap-active class and you can control collapse using collapse-open/collapse-close class.

[blockhunts]

i am sorry but I am still learning laravel. so I am still having a bit difficulty implementing it

[saadeghi]

Laravel's PHP code runs on the server. How are you handling front-end functionality using JS?
Vue? AlpineJS? jQuery? Vanilla JS?

[blockhunts]

I used jetstream as the starter template. So it's using AlpineJs and livewire

[saadeghi]

so you should be able to use Alpine's x-data to define a state (to define if swap is active or not. or if collapse is open or not).
Then you can bind class names and change the class names on click

[blockhunts]

i see, thank you for the help