Auto-Collapsing Collapsible Tables?

Ask the community
, , , ,
1

Question:
Good day! I’m building pages that have collapsible boxes, and I managed to get the Javascript for expanding and collapsing my boxes working without a problem. What I’m seeking to find out is, is there some functionality out there that will allow me to auto-collapse one box when I choose to expand another? Looking online is bearing little fruit, because I may or may not be asking the question well enough, so I hope this makes sense!

Product:
I’m using Wix Studio

What are you trying to achieve:
The goal is that when I have a box expanded, and I choose to expand another box on the same page, the first box I have open will automatically collapse.

What have you already tried:
Attempted to research Javascript code to allow for this functionality, with no success

Additional information:
I am relatively new at all of this, so I’m still orienting through all of the different resources available to enhance functionality of the website.

2

You could hold a variable, e.g. currentBox

Something roughly like this:

let currentBox
function showBox(boxTag) {
    if (currentBox) $w(currentBox).collapse()
    $w(boxTag).expand()
    currentBox = boxTag
}
function collapseBox() {
    if (currentBox) $w(currentBox).collapse()
    currentBox = null
}
3

I think that makes sense. I just need to figure out where in my code I should place it.

For example, this is one of my boxes:

$w.onReady(function () {

$w('#vectorImage13').onClick(() => {
	$w('#multiStateBox6').changeState("Expand6")
})

	$w('#vectorImage12').onClick(() => {
	$w('#multiStateBox6').changeState("Collapse6")

Would I need to replace any of this code? Or would I place the code you provided outside or in between my existing code?

Thanks!

4

Looking at your code, you’re not collapsing and expanding anything, you’re using a multi-state box and changing its state, so what I wrote does not really apply

Your use of the multistate box seems very weird and it seems to me it might not be what you’re looking for

Let’s start from what you are actually trying to achieve

5

I apologize, I probably should have made that clear. Yes, currently, I’m using multi-state boxes to achieve expanding and collapsing. I am seeking a solution, if any exists, to have one multi-state box automatically collapse when I expand another. For example, I have six multi-state boxes on the page I’m building. I only want one box expanded at a time, and when I expand one box after expanding another, I want the first expanded box to collapse on its own without the extra step of collapsing it manually.

Thank you again!

6

ok so first things first, if those boxes only hold a single actual state (Disregarding their “collapsed” state) - You should not be using multi-state boxes

Now, as for the real expand/collapse functionality, just use $w.Element.expand/collapse

Use normal box elements, and $w('#boxTag').expand() or collapse()

Let’s clean up those element names, I only saw a single multi-state box and am already lost with how image13 collapses box6 and image12 expands it*

Name them however you wish, but stay consistent.

* Which also begs the question - Is it intentional to have separate expand/collapse buttons?

7

It’s highly probable that at the end oft the day, I simply didn’t do this in the most efficient way, given that I’m still pretty new at anything past basic HTML / CSS coding, but I had put these boxes (with separate buttons for expand and collapse) together following a tutorial I found on Youtube. And after several times copying and pasting the same code, I didn’t want to very too much for risk of breaking the functionality of the boxes.

I want to sort of make sure that I’m reading your reply correctly… if I were to put

$w(‘#boxTag’).expand()

(with ‘boxTag’ being replaced with the name of my box, I assume a name for each in Expand and Collapse state)

I would also need to place the Collapse command counterpart right below it, yes? So it would look like this:

$w(‘#boxTag’).expand()
$w(‘#boxTag’).collapse()

Or am I way off?

8

Right below it would run it right after it, meaning your box would expand and than collapse, and you will never see it

9

Okay, I’ll give that a shot, thank you for your time and insight!