Help With Expanding and Collapsing Elements

Ask the community
,
1

I am trying to expand and collapse elements based on what a user selects in a radio button. The radio button has two options “One Time Purchase” and “Subscribe and Save 15%”. Essentially, if the user selects “One Time Purchase”, I want to show one button, and if the user selects “Subscribe and Save” I want to show a different button. I put together the following code to try to accomplish this, but it isn’t working. Any suggestions? Thanks for any insight you can offer!

export function RadioGroup1_click(event) {
console.log($w( “#RadioGroup1” ).value);
if ($w( “#RadioGroup1” ).value === “One Time Purchase” ) {
$w( “#button1” ).collapse();
$w( “#button2” ).expand();
}

if ($w( “#RadioGroup1” ).value === “Subscribe & Save” ) {
$w( “#button2” ).collapse();
$w( “#button1” ).expand();
} }

2

First off you need to make sure that the RadioGroup values are setup to match what you are using in your code. The labels are what the user sees on the page and the value is what is saved into the dataset and used in your code.
https://support.wix.com/en/article/setting-labels-and-values-for-radio-buttons-and-dropdown-lists

As for the code there are many ways of doing something like this as I have done on a simple example test site a while ago.

https://givemeawhisky.wixsite.com/radiobuttonexample/blank-1

$w.onReady(function () {
});

export function radioGroup1_change(event) {
	if ($w('#radioGroup1').value === 'YES') {
		$w('#additionalElement').show();
	} else {
	if ($w('#radioGroup1').value === 'NO') {
		$w('#additionalElement').hide();
	}
}
}

https://givemeawhisky.wixsite.com/radiobuttonexample/radiobuttontest

import wixWindow from 'wix-window';

$w.onReady(function () {
});

export function radioGroup1_change(event) {
if ($w('#radioGroup1').value === 'Free') {
wixWindow.openLightbox("Free");
} else {
if ($w('#radioGroup1').value === 'Executive') {
wixWindow.openLightbox("Executive");
} else {
if ($w('#radioGroup1').value === 'Teacher/Coaches') {
wixWindow.openLightbox("Teacher/Coaches");
}
}
}
}

export function button1_click(event) {
if ($w('#radioGroup2').value === 'Free') {
wixWindow.openLightbox("Free");
} else {
if ($w('#radioGroup2').value === 'Executive') {
wixWindow.openLightbox("Executive");
} else {
if ($w('#radioGroup2').value === 'Teacher/Coaches') {
wixWindow.openLightbox("Teacher/Coaches");
}
}
}
}

https://givemeawhisky.wixsite.com/radiobuttonexample

$w.onReady(function () {
});

export function button1_click(event) {
	if ($w('#radioGroup1').value === 'London') {
		$w('#correctMessage').show();
		$w('#wrongMessage').hide();
	} else {
	if ($w('#radioGroup1').value === 'Paris' || $w('#radioGroup1').value === 'New York') {
	    $w('#wrongMessage').show();
		$w('#correctMessage').hide();
	}
}
}

	export function button2_click(event) {
	if ($w('#radioGroup1').value === 'London') {
		$w("#button2").style.backgroundColor = "green";
		$w("#button2").style.color = "yellow";
		$w('#button2').label = "CORRECT!";
	} else {
	if ($w('#radioGroup1').value === 'Paris' || $w('#radioGroup1').value === 'New York') {
	    $w("#button2").style.backgroundColor = "red";
		$w("#button2").style.color = "yellow";
		$w('#button2').label = "WRONG!";
	}
	}
	}

export function button3_click(event) {
    $w('#radioGroup1').value = "";
    $w('#radioGroup1').resetValidityIndication();
	$w('#radioGroup2').value = "";
    $w('#radioGroup2').resetValidityIndication();
	$w("#button2").style.backgroundColor = "#384AD3";
	$w("#button2").style.color = "white";
	$w('#button2').label = "Button Label Changes";
	$w("#button8").style.backgroundColor = "#384AD3";
	$w("#button8").style.color = "white";
	$w('#button8').label = "WAIT!";
	$w('#correctMessage').hide();
	$w('#wrongMessage').hide();
	$w('#box2').hide();
	$w('#box1').hide();
	$w("#button5").enable();
}


export function button4_click(event) {
	if ($w('#radioGroup2').value === 'London') {
		$w("#button2").style.backgroundColor = "green";
		$w("#button2").style.color = "yellow";
		$w('#button2').label = "CORRECT!";
		$w("#button8").style.backgroundColor = "green";
		$w("#button8").style.color = "yellow";
		$w('#button8').label = "CORRECT!";
		$w('#box1').show();
		$w('#box2').hide();
		$w("#button5").disable();
	} else {
	if ($w('#radioGroup2').value === 'Paris' || $w('#radioGroup2').value === 'New York') {
	    $w("#button2").style.backgroundColor = "red";
		$w("#button2").style.color = "yellow";
		$w('#button2').label = "WRONG!";
		$w("#button8").style.backgroundColor = "red";
		$w("#button8").style.color = "yellow";
		$w('#button8').label = "WRONG!";
		$w('#box1').hide();
		$w('#box2').show();
        $w("#button5").enable();
	}
	}
	}
3

Thank you so much for your response. Worked like a charm!