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();
}
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.