Show certain elements on the page if dropbox = x value

I have a form that has certain sections that are only relevant if the client choses x option. Rather than create many forms, I would like to hide and collapse certain elements on the page unless the dropdown = certain values. I have three different options in the dropdown and selecting each of those options should unhide other elements on the page. How do I do the following:

$w(“#PGFDataset”).onReady( function () {
//get the value
const ProductValue = $w(‘product’);
//if dropdown = x show the following textbox and other elements.
if (ProductValue == ‘ATI’) {
$w(‘#text43’).show();
}
});
});

Thanks

Hi,

You can hide all the ( certain sections that are only relevant if the client chooses x option ) onLoad , then in the dropdown menu => onChange()

export function dropdown1_change(event) {
 if($w("#dropdown1").value==="X"){
    $w("#Section1").show();
  }

For more details on how to use dropdown menu - here

Good luck.

Mustafa