Collapsing and Expanding

Ask the community
,
1

We wrote some code to assist with an input form. Basically we want the box below the input field to expand to reveal another set of input fields if the user has inputted text in the focussed field ( inputIngredient1_change). We want this to repeat several more times.

The code below sort of works. The boxes expand but the next set of fields below the inputs will not appear just below the collapsed input fields. There is empty space as if we are hiding instead of collapsing.

We are pretty new at this…thanks in advance code geniuses…

Any thoughts?

$w.onReady( function () {

});

export function inputIngredient1_change(event) {
$w(‘#boxIngredient2’).expand();

}

export function inputIngredient4_change_1(event) {
$w(‘#boxIngredient5’).expand();
}

export function inputIngredient5_change_1(event) {
$w(‘#boxIngredient6’).expand();
}

export function inputIngredient6_change_1(event) {
$w(‘#boxIngredient7’).expand();
}

export function inputIngredient3_change(event) {
$w(‘#boxIngredient4’).expand();
}

export function inputIngredient7_change(event) {
$w(‘#boxIngredient8’).expand();
}

export function inputIngredient8_change(event) {
$w(‘#boxIngredient9’).expand();
}

export function inputIngredient9_change(event) {
$w(‘#boxIngredient10’).expand();
}

export function inputIngredient10_change(event) {
$w(‘#boxIngredient11’).expand();
}

export function inputIngredient11_change(event) {
$w(‘#boxIngredient12’).expand();
}

export function inputIngredient2_change(event) {
$w(‘#boxIngredient3’).expand();
}

2

You don’t have an unrealistic expectation on this. It should work as you’re hoping. It’s a little unclear about how you have things set up. Do you have inputs attached to all of these collapsed boxes? Maybe a screen shot would give one of us a better idea as to what the problem is.

3

Anthonyb thanks for your help. Yes, there are input fields - two dropdown and one text input - in each box. They only code we have on the page is what you see above so I wasn’t sure if we are missing something. I would send a screenshot but the site is for a client and we are not at liberty to share one. I know, I know…

BTW we did try code that used an If Else statement to trigger the expand if the inputIngredient1 was not equal to “”. We saw this work on another site but it kept returning an error even though we copied the code exactly.

Anyway, is there anything we should try? Much appreciate the assistance.

4

@amazing If you have other elements on the page horizontal to these, that would definitely impact how these collapse. If that’s the case, you might consider using a strip or box to put all of these collapsible elements in.

Other than that, nothing comes to mind.

5

@tony-brunsman Thanks again. We tried a strip below but not a strip for the collapsible items. We will try that. :sunglasses:

6

Well, tried that suggestion. It made sense. But it’s still not working. And every time we go to preview and go back to the editor all the boxes are on top of each other. We undo to return to normal.

To keep to schedule we will reformat to all expanded. We can always recode when we figure this out.

Thanks for taking the time to assist. If you think of anything else…we’re happy to hear. :grin: