# Streamlining code

**URL:** <https://forum.wixstudio.com/t/streamlining-code/3901>\
**Category:** Ask the community\
**Tags:** question, code\
**Created:** [March 8, 2023, 10:12pm UTC](https://forum.wixstudio.com/t/streamlining-code/3901 "2023-03-08T22:12:01Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![peter-kacala](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/peter-kacala/32/9131_2.png) [@peter-kacala](https://forum.wixstudio.com/u/peter-kacala)\
**Post date:** [March 8, 2023, 10:12pm UTC](https://forum.wixstudio.com/t/streamlining-code/3901/1 "2023-03-08T22:12:01Z")

</div>

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

```

})  
}

---

<div class="post-metadata">

**Author:** ![amandam](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/amandam/32/79539_2.png) [@amandam](https://forum.wixstudio.com/u/amandam)\
**Post date:** [March 9, 2023, 4:35pm UTC](https://forum.wixstudio.com/t/streamlining-code/3901/2 "2023-03-09T16:35:20Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![peter-kacala](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/peter-kacala/32/9131_2.png) [@peter-kacala](https://forum.wixstudio.com/u/peter-kacala)\
**Post date:** [March 9, 2023, 5:15pm UTC](https://forum.wixstudio.com/t/streamlining-code/3901/3 "2023-03-09T17:15:59Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![peter-kacala](https://sea1.discourse-cdn.com/wix/user_avatar/forum.wixstudio.com/peter-kacala/32/9131_2.png) [@peter-kacala](https://forum.wixstudio.com/u/peter-kacala)\
**Post date:** [March 9, 2023, 5:17pm UTC](https://forum.wixstudio.com/t/streamlining-code/3901/4 "2023-03-09T17:17:15Z")

</div>

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”));