Streamlining code

Ask the community
,
1

I am trying to scroll to a section and collapse and expand different sections based on a drop down element. Its currently not working and cant figure out why. Currently I have all text box elements collapsed and below I try to scroll to various sections and reveal specific text elements.

I am new to this and I am sure there is a more efficient way of writing this code but this is where i am at. Any help would be greatly appreciated.

export function dropdown1_change(event) {

$w.onReady(() => {
console.log($w(‘#dropdown1’).value)
$w(‘#dropdown1’).onChange(() => {
let val = $w(‘#dropdown1’).value;

        if (val === "2 pizzas")  { $w('#text30').scrollTo() } 
        
        $w("#text30").expand(); 
        $w("#checkboxGroup3").expand(); 
       
        
        //$w("#checkboxGroup4").collapse();       
        //$w("#text32").collapse(); 
        //$w("#text33").collapse(); 
        //$w("#text34").collapse(); 
        //$w("#checkboxGroup5").collapse(); 
        //$w("#checkboxGroup6").collapse(); 
        //$w("#checkboxGroup7").collapse(); 
        

        if (val === "4 pizzas") { $w('#text31').scrollTo() } 
     
        //$w("#text30").collapse(); 
        $w("#text31").expand(); 
        $w("#text32").collapse(); 
        $w("#text33").collapse(); 
        $w("#text34").collapse(); 

        $w("#checkboxGroup3").collapse(); 
        $w("#checkboxGroup4").expand(); 
        $w("#checkboxGroup5").collapse(); 
        $w("#checkboxGroup6").collapse(); 
        $w("#checkboxGroup7").collapse();  
        
        if (val === "6 pizzas") { $w('#text32').scrollTo() }        
       
        $w("#text30").collapse(); 
        $w("#text31").collapse(); 
        $w("#text32").expand(); 
        $w("#text33").collapse(); 
        $w("#text34").collapse(); 

        $w("#checkboxGroup3").collapse(); 
        $w("#checkboxGroup4").collapse(); 
        $w("#checkboxGroup5").expand(); 
        $w("#checkboxGroup6").collapse(); 
        $w("#checkboxGroup7").collapse();    

        if (val === "8 pizzas") { $w('#text33').scrollTo() }        
     
        $w("#text30").collapse(); 
        $w("#text31").collapse(); 
        $w("#text32").collapse(); 
        $w("#text33").expand(); 
        $w("#text34").collapse(); 

        $w("#checkboxGroup3").collapse(); 
        $w("#checkboxGroup4").collapse(); 
        $w("#checkboxGroup5").collapse(); 
        $w("#checkboxGroup6").expand(); 
        $w("#checkboxGroup7").collapse(); 

        if (val === "10 pizzas") { $w('#text34').scrollTo() }  
     
        $w("#text30").collapse(); 
        $w("#text31").collapse(); 
        $w("#text32").collapse(); 
        $w("#text33").collapse(); 
        $w("#text34").expand(); 

        $w("#checkboxGroup3").collapse(); 
        $w("#checkboxGroup4").collapse(); 
        $w("#checkboxGroup5").collapse(); 
        $w("#checkboxGroup6").collapse(); 
        $w("#checkboxGroup7").expand();      
})

})
}

2

This is alot of code to read through. Can you be a little more specific? When you say not working, what do you mean?

It looks like you are calling all the expand/collapse code every time your dropdown changes.

I would perhaps isolate one use case and debug it and then you will know how to hookup the rest

3

Yes I want to expand, collapse and scroll when a dropdown is selected. The scroll seems to work but doesn’t expand. I tried collapsing most of the code to functions but not sure if velo is going to accept it.

4

function expandOne(n){
let val = $w(‘#dropdown1’).value;
// collapse all
$w(“#text30”).collapse();
$w(“#text31”).collapse();
$w(“#text32”).collapse();
$w(“#text33”).collapse();
$w(“#text34”).collapse();
$w(“#checkboxGroup3”).collapse();
$w(“#checkboxGroup4”).collapse();
$w(“#checkboxGroup5”).collapse();
$w(“#checkboxGroup6”).collapse();
$w(“#checkboxGroup7”).collapse();
// expand one section
$w(“#text”+n).expand();
$w(“#text”+n).scrollTo()
$w(“#checkboxGroup”+n).expand();

// handle checkbox 
//call (checkBox) function

if (val === “2 pizzas”) (expandOne(“30”));
if (val === “4 pizzas”) (expandOne(“31”));
if (val === “6 pizzas”) (expandOne(“32”));
if (val === “8 pizzas”) (expandOne(“33”));
if (val === “10 pizzas”) (expandOne(“34”));
if (val === “more10”) (expandOne(“34”));