Is there a way to streamline/fix my code?

sophiechung91 · April 29, 2021, 12:20am

I created a blog using a dynamic page. The dynamic page displays two different article structures/templates:

A standard typical blog article structure
A list structure (e.g. top 25 shoes to buy this summer).

Using collapsible elements, my dynamic page shows one “template” and hides the other, depending on which cells have content in my database.

Everything works fine on the desktop version of my dynamic blog article pages, however, on the mobile version, it’s not collapsing the elements that are linked to empty cells in my database. Instead, I’m getting these big empty spaces on the mobile version of my dynamic blog article pages.

When I first published last week, the mobile version of my dynamic blog pages were working normally as expected. I then edited the height of my strips on Friday and that’s when the problem arose.

I’ve tried troubleshooting the problem by emptying my cache, using different devices and browsers, etc. to no avail. The problem isn’t due to the 70/10 rule either as it works fine on desktop, and I’ve also double-clicked the adjust page height button on the footer.

Now I’m not an expert when it comes to wix code (more of a trial and error copy pasta kind of coder atm) and I do have a lot of code on my dynamic page (around 1600 lines). Most of this code is repetitive (see below), so I’m wondering if maybe that has something to do with my problem (or maybe it’s just not structured properly and could be streamlined in some way.
Or perhaps it has something to do with the way I’m using the onReady functions.

Anyway, I thought I’d put my code up here to see if a real expert has any solutions or suggestions!

Here is a link to one of my dynamic blog page articles:
https://www.chattychums.com/articles/beauty/hourglass-vs.-laura-mercier—the-best-translucent-setting-powder%3F

Here is my code:

import wixWindow from ‘wix-window’ ;

$w.onReady( function () {
if (wixWindow.formFactor === “Mobile” ){
$w( “#line11” ).expand();
$w( “#text88” ).expand();
$w( “#box46” ).expand();
}
$w( ‘#columnStrip18’ ).hide();
$w( ‘#columnStrip7’ ).show();

$w( “#dynamicDataset” ).onReady( () => {
let item = $w( “#dynamicDataset” ).getCurrentItem();
if (item.subtitle) {
$w( “#ListStrip” ).show();
$w( “#columnStrip176” ).show();
} else {
$w( “#ListStrip” ).collapse();
$w( “#ListStrip” ).hide();
$w( “#columnStrip176” ).collapse();
$w( “#columnStrip176” ).hide();
}
} );

$w.onReady( () => {
$w( “#BodyImage3” ).fitMode = “fixedWidth” ;
$w( “#SoloImage” ).fitMode = “fixedWidth” ;
$w( “#dynamicDataset” ).onReady( () => {
let item = $w( “#dynamicDataset” ).getCurrentItem();
if (item.body1) {
$w( “#columnStrip173” ).show();
$w( “#Body1” ).show();
$w( “#BlankColumn2” ).show();
} else {
$w( “#Body1” ).collapse();
$w( “#Body1” ).hide();
$w( “#columnStrip173” ).collapse();
$w( “#columnStrip173” ).hide();
$w( “#BlankColumn2” ).collapse();
$w( “#BlankColumn2” ).hide();
}
} );

$w( "#dynamicDataset" ).onReady( () => {

let item = $w( “#dynamicDataset” ).getCurrentItem();
if (item.blog1LinkText) {
$w( “#body1Button” ).show();
$w( “#columnStrip174” ).show();
} else {
$w( “#columnStrip174” ).collapse()
$w( “#columnStrip174” ).hide();
$w( “#body1Button” ).collapse();
$w( “#body1Button” ).hide();
}
} );

$w( "#dynamicDataset" ).onReady( () => {

   $w( "#dynamicDataset" ).onReady( () => {

let item = $w( “#dynamicDataset” ).getCurrentItem();
if (item.blog2LinkText) {
$w( “#body2Button” ).show();
} else {
$w( “#body2Button” ).collapse();
$w( “#body2Button” ).hide();
}
} );

$w( "#dynamicDataset" ).onReady( () => {

         $w( "#dynamicDataset" ).onReady( () => {

let item = $w( “#dynamicDataset” ).getCurrentItem();
if (item.body3LinkText) {
$w( “#body3Button” ).show();
} else {
$w( “#body3Button” ).collapse();
$w( “#body3Button” ).hide();
}
} );

   $w( "#dynamicDataset" ).onReady( () => {

               $w( "#dynamicDataset" ).onReady( () => {

let item = $w( “#dynamicDataset” ).getCurrentItem();
if (item.body4LinkText) {
$w( “#body4Button” ).show();
} else {
$w( “#body4Button” ).collapse();
$w( “#body4Button” ).hide();
}
} );

$w( "#dynamicDataset" ).onReady( () => {

               $w( "#dynamicDataset" ).onReady( () => {

let item = $w( “#dynamicDataset” ).getCurrentItem();
if (item.body5LinkText) {
$w( “#body5Button” ).show();
} else {
$w( “#body5Button” ).collapse();
$w( “#body5Button” ).hide();
}
} );

$w( "#dynamicDataset" ).onReady( () => {

$w( "#dynamicDataset" ).onReady( () => {

(code carries on but is too long to pos here)

Certified_Code · April 29, 2021, 12:29am

Upon reading your live site, it can be simplified.

For example:

    $w("#dynamicDataset").onReady(() => {
 let item = $w("#dynamicDataset").getCurrentItem();
 if (item.listBodySummaryTitle) {
            $w("#columnStrip170").show();
            $w("#columnStrip171").show();
        } else {
            $w("#columnStrip170").collapse();
            $w("#columnStrip170").hide();
            $w("#columnStrip171").collapse();
            $w("#columnStrip171").hide();
        }
    });
    $w("#dynamicDataset").onReady(() => {
 let item = $w("#dynamicDataset").getCurrentItem();
 if (item.listBodySummary) {
            $w("#columnStrip172").show();
            $w("#BlankColumn12").show();
        } else {
            $w("#columnStrip172").collapse();
            $w("#columnStrip172").hide();
            $w("#BlankColumn12").collapse();
            $w("#BlankColumn12").hide();
        }
    });

To

    $w("#dynamicDataset").onReady(() => {
 let item = $w("#dynamicDataset").getCurrentItem();
 if (item.listBodySummaryTitle) {
            $w("#columnStrip170, #columnStrip171").show();
            $w("#columnStrip171").show();
        } else {
            $w("#columnStrip170, #columnStrip171").collapse();
            $w("#columnStrip170, #columnStrip171").hide();
        }
 if (item.listBodySummary) {
            $w("#columnStrip172, #BlankColumn12").show();
        } else {
            $w("#columnStrip172, #BlankColumn12").collapse();
            $w("#BlankColumn12, #columnStrip172").hide();
        }
    });

Also, the element ID should be changed to a read-able ID like

listBodySummaryTitleStrip

Hope this helps

sophiechung91 · April 29, 2021, 12:33am

Thank you so much! I’ll give that a go

CODE-NINJA · April 29, 2021, 1:07am

Damn, i am always too late xDDDDDD

import wixWindow from 'wix-window';

//When page is ---> READY ......
$w.onReady(function () { 
    $w('#columnStrip18').hide();        //---> hides a STRIP
    $w('#columnStrip7').show();         //---> shows a STRIP

    $w("#BodyImage3").fitMode = "fixedWidth";
    $w("#SoloImage").fitMode = "fixedWidth";

 //When dataset is ready......
    $w("#dynamicDataset").onReady(() => { 
         let item = $w("#dynamicDataset").getCurrentItem(); //---> gets current item
 
 // MOBILE-VERSION runs here ......
 if(wixWindow.formFactor === "Mobile"){
            $w("#line11").expand();
            $w("#text88").expand();
            $w("#box46").expand();
        }
 else{ /*????? what happens if not mobile-version ??????? */}
 

 // If-Else-statements ----------------------------------------
 if (item.subtitle) {
            $w("#ListStrip, #columnStrip176").expand();
            $w("#ListStrip, #columnStrip176").show();
        } else {
            $w("#ListStrip, #columnStrip176").hide();
            $w("#ListStrip, #columnStrip176").collapse();
        }
 // If-Else-statements ----------------------------------------
 if (item.body1) {
            $w("#Body1, #columnStrip173, #BlankColumn2").expand();
            $w("#Body1, #columnStrip173, #BlankColumn2").show();
        }else {
            $w("#Body1, #columnStrip173, #BlankColumn2").hide();
            $w("#Body1, #columnStrip173, #BlankColumn2").collapse();
        }
 // If-Else-statements ----------------------------------------
 if (item.blog1LinkText) {
            $w("#columnStrip174").expand();
            $w("#body1Button, #columnStrip174").show();
 
        } else {
            $w("#columnStrip174, #body1Button").hide();
            $w("#columnStrip174").collapse()
        }
 // If-Else-statements ----------------------------------------
 if (item.bodyImage1) {
            $w("#BodyImage1").expand();
            $w("#BodyImage1").show();
        } else {
            $w("#BodyImage1").hide();
            $w("#BodyImage1").collapse();
        }
 // If-Else-statements ----------------------------------------
 if (item.bodyImage2) {
            $w("#BodyImage2, #columnStrip8, #columnStrip4").expand();
            $w("#BodyImage2, #columnStrip8, #columnStrip4").show();
        } else {
            $w("#BodyImage2, #columnStrip8, #columnStrip4").hide();
            $w("#BodyImage2, #columnStrip8, #columnStrip4").collapse();
        }
 // If-Else-statements ----------------------------------------
 if (item.soloImage) {
            $w("#SoloImage, #BlankColumn3, #columnStrip9").expand();
            $w("#SoloImage, #BlankColumn3, #columnStrip9").show();
        } else {
            $w("#SoloImage, #BlankColumn3, #columnStrip9").hide();
            $w("#SoloImage, #BlankColumn3, #columnStrip9").collapse();
        }
 // If-Else-statements ----------------------------------------  
 if (item.bodyImage1Caption) {
            $w("#BodyImage1Caption").expand();
            $w("#BodyImage1Caption").show();
        } else {
            $w("#BodyImage1Caption").collapse();
            $w("#BodyImage1Caption").hide();
        }
 // If-Else-statements ----------------------------------------

 if (item.bodyImage2Caption) {
            $w("#BodyImage2Caption").expand();
            $w("#BodyImage2Caption").show();
        } else {
            $w("#BodyImage2Caption").hide();
            $w("#BodyImage2Caption").collapse();    
        }
 // If-Else-statements ----------------------------------------
 if (item.soloImageCaption) {
            $w("#SoloImageCaption").expand();
            $w("#SoloImageCaption").show();
        } else {
            $w("#SoloImageCaption").hide();
            $w("#SoloImageCaption").collapse();
        }
 // If-Else-statements ----------------------------------------
 if (item.subtitle2) {
            $w("#ColumnStrip9, #BlankColumn4").expand();
            $w("#ColumnStrip9, #BlankColumn4").show();
        } else {
            $w("#ColumnStrip9, #BlankColumn4").hide();
            $w("#ColumnStrip9, #BlankColumn4").collapse();       
        }

 // If-Else-statements ----------------------------------------

 // ---> CONTINUE like that .........


 // If-Else-statements ----------------------------------------

 // If-Else-statements ----------------------------------------

 // If-Else-statements ----------------------------------------

 // If-Else-statements ----------------------------------------

 // If-Else-statements ----------------------------------------

 // and so on .......

    }); //---> DATASET.onReady-close
 
}); //---> $w.onReady-close

Killed all your onReadys()

But as you can see it takes time to optimize your VERY LONG code.

TIP:
Always place
—> expand() before show()
—> hide() before collapse()

Why?
Try this one for example…and replace your first

// If-Else-statements ----------------------------------------
 if (item.subtitle) {
            $w("#ListStrip, #columnStrip176").expand();
            $w("#ListStrip, #columnStrip176").show();
        } else {
            $w("#ListStrip, #columnStrip176").hide();
            $w("#ListStrip, #columnStrip176").collapse();
        }

…with…

// If-Else-statements ----------------------------------------
 if (item.subtitle) {
            $w("#ListStrip, #columnStrip176").expand()
            $w("#ListStrip, #columnStrip176").show('fade');
        } else {
            $w("#ListStrip, #columnStrip176").hide('fade').then(()=>{
                $w("#ListStrip, #columnStrip176").collapse();
            });
        }

CODE-NINJA · April 29, 2021, 1:20am

And in your next posting you will use —> code-blocks to show your CODE, please. (like we do).

sophiechung91 · April 29, 2021, 4:45am

@certified-code & @russian-dima ok so I’ve implemented your suggestions - thank you so much (my code is looking nice and tight!)

Unfortunately, the problem still persists on mobile. Any idea on what could be causing this? Is it possible to have too many collapsible elements or requests? It’s odd that it’s working fine on desktop …

CODE-NINJA · April 29, 2021, 10:49am

@sophiechung91 What exactly is the problem on mobile?
Can you show a little video to demonstrate the problem ?

You can use for example this ONLINE-SCREEN-RECORDER here…

sophiechung91 · April 29, 2021, 10:25pm

@russian-dima the empty spaces shown in the video aren’t visible while on the editor. Just on preview and live mobile versions of this dynamic page.

sophiechung91 · April 30, 2021, 3:46am

@russian-dima Ok, I’ve narrowed down the source of the problem. Certain elements are not collapsing and hiding despite my code telling those elements to do so when there’s no content in their respective cells within the database. The end result is that the strip shows but there’s no content inside, leaving a big gap.

There are no spelling mistakes in the code and there are no spelling errors with regards to my database columns. The code collapse and hide code should work and I’m not sure why it’s not working with some elements when it’s working with others.

For example, in the screenshots attached the #SoloImage should hide and collapse if there’s no content in its respective cell within the database, as per the code. However, it doesn’t hide and collapse.

Link to editor: https://editor.wix.com/html/editor/web/renderer/edit/b64b4e3d-08c9-44b8-b806-e39ccf001d15?metaSiteId=ec813563-d94f-4729-acb2-9f2074090f6c#!/builder/story/null:ec813563-d94f-4729-acb2-9f2074090f6c

sophiechung91 · May 6, 2021, 9:45pm

Here is my updated code:

 import wixWindow from 'wix-window';

//When page is ---> READY ......
$w.onReady(function () { 
    $w('#columnStrip18').hide(); //---> hides a STRIP
    $w('#columnStrip7').show(); //---> shows a STRIP

    $w("#BodyImage3").fitMode = "fixedWidth";
    $w("#SoloImage").fitMode = "fixedWidth";

 //When dataset is ready......
    $w("#dynamicDataset").onReady(() => { 
 let item = $w("#dynamicDataset").getCurrentItem(); //---> gets current item of dynamic-dataset
 
 // MOBILE-VERSION runs here ......
 if(wixWindow.formFactor === "Mobile"){
            $w("#line11").expand();
            $w("#text88").expand();
            $w("#box46").expand();
 }
 else{ 
    $w("#line11").collapse();
    $w("#text88").collapse();
    $w("#box46").collapse();
 }

 if (item.body1) {
          $w("#columnStrip173, #Body1, #BlankColumn2").expand();
          $w("#columnStrip173, #Body1, #BlankColumn2").show('fade');
 } else {
          $w("#Body1, #columnStrip173, #BlankColumn2").hide('fade').then(()=>{
          $w("#Body1, #columnStrip173, #BlankColumn2").collapse();
 });
 }
 if (item.blog1LinkText) {
   $w("#body1Button, #columnStrip174").expand();
   $w("#body1Button, #columnStrip174").show('fade');
 } else {
   $w("#columnStrip174, #body1Button").hide('fade').then(()=>{
   $w("#columnStrip174, #body1Button").collapse();
 });
 }
 if (item.subtitle) {
            $w("#ListStrip, #columnStrip176").expand()
            $w("#ListStrip, #columnStrip176").show('fade');
 } else {
            $w("#ListStrip, #columnStrip176").hide('fade').then(()=>{
                $w("#ListStrip, #columnStrip176").collapse();
 });
 }
if (item.bodyImage1) {
          $w("#BodyImage1").expand();
          $w("#BodyImage1").show('fade');
 } else {
          $w("#BodyImage1").hide('fade').then(()=>{
          $w("#BodyImage1").collapse();
 });
 }
 if (item.bodyImage2) {
          $w("#BodyImage2, #columnStrip8, #columnStrip4").expand();
          $w("#BodyImage2, #columnStrip8, #columnStrip4").show('fade');
 } else {
          $w("#BodyImage2, #columnStrip8, #columnStrip4").hide('fade').then(()=>{
          $w("#BodyImage2, #columnStrip8, #columnStrip4").collapse();
 });
 }
 if (item.soloImage) {
          $w("#SoloImage, #BlankColumn3, #columnStrip9").expand();
          $w("#SoloImage, #BlankColumn3, #columnStrip9").show('fade');
 } else {
          $w("#SoloImage, #BlankColumn3, #columnStrip9").hide('fade').then(()=>{
          $w("#SoloImage, #BlankColumn3, #columnStrip9").collapse();
 });
 }
 if (item.bodyImage1Caption) {
          $w("#BodyImage1Caption").expand();
          $w("#BodyImage1Caption").show('fade');
 } else {
          $w("#BodyImage1Caption").hide('fade').then(()=>{
          $w("#BodyImage1Caption").collapse();
 });
 }
 if (item.bodyImage2Caption) {
          $w("#BodyImage2Caption").expand();
          $w("#BodyImage2Caption").show('fade');
 } else {
          $w("#BodyImage2Caption").hide('fade').then(()=>{
          $w("#BodyImage2Caption").collapse();
 });
 }
 if (item.soloImageCaption) {
          $w("#SoloImageCaption").expand();
          $w("#SoloImageCaption").show('fade');
 } else {
          $w("#SoloImageCaption").hide('fade').then(()=>{
          $w("#SoloImageCaption").collapse();
 });
 }
 if (item.subtitle2) {
          $w("#ColumnStrip9, #BlankColumn4").expand();
          $w("#ColumnStrip9, #BlankColumn4").show('fade');
 } else {
          $w("#ColumnStrip9, #BlankColumn4").hide('fade').then(()=>{
          $w("#ColumnStrip9, #BlankColumn4").collapse();
 });
 }
 if (item.body2) {
          $w("#ColumnStrip11, #BlankColumn5").expand();
          $w("#ColumnStrip11, #BlankColumn5").show('fade');
 } else {
          $w("#ColumnStrip11, #BlankColumn5").hide('fade').then(()=>{
          $w("#ColumnStrip11, #BlankColumn5").collapse();
 });
 }
 if (item.blog2LinkText) {
          $w("#body2Button").expand();
          $w("#body2Button").show('fade');
 } else {
          $w("#body2Button").hide('fade').then(()=>{
          $w("#body2Button").collapse();
 });
 }
 if (item.subtitle3) {
          $w("#ColumnStrip13, #BlankColumn6").expand();
          $w("#ColumnStrip13, #BlankColumn6").show('fade');
 } else {
          $w("#ColumnStrip13, #BlankColumn6").hide('fade').then(()=>{
          $w("#ColumnStrip13, #BlankColumn6").collapse();
 });
 }
 if (item.body3) {
          $w("#ColumnStrip15, #BlankColumn7").expand();
          $w("#ColumnStrip15, #BlankColumn7").show('fade');
 } else {
          $w("#ColumnStrip15, #BlankColumn7").hide('fade').then(()=>{
          $w("#ColumnStrip15, #BlankColumn7").collapse();
 });
 }


...continues in code Part 2 below.

sophiechung91 · May 6, 2021, 9:48pm

 if (item.body3LinkText) {
          $w("#body3Button").expand();
          $w("#body3Button").show('fade');
 } else {
          $w("#body3Button").hide('fade').then(()=>{
          $w("#body3Button").collapse();
 });
 }
 if (item.excerpt) {
          $w("#ColumnStrip17, #BlankColumn8").expand();
          $w("#ColumnStrip17, #BlankColumn8").show('fade');
 } else {
          $w("#ColumnStrip17, #BlankColumn8").hide('fade').then(()=>{
          $w("#ColumnStrip17, #BlankColumn8").collapse();
 });
 }
 if (item.subtitle4) {
          $w("#ColumnStrip19, #BlankColumn9").expand();
          $w("#ColumnStrip19, #BlankColumn9").show('fade');
 } else {
          $w("#ColumnStrip19, #BlankColumn9").hide('fade').then(()=>{
          $w("#ColumnStrip19, #BlankColumn9").collapse();
 });
 }
 if (item.body4) {
          $w("#ColumnStrip21, #BlankColumn10").expand();
          $w("#ColumnStrip21, #BlankColumn10").show('fade');
 } else {
          $w("#ColumnStrip21, #BlankColumn10").hide('fade').then(()=>{
          $w("#ColumnStrip21, #BlankColumn10").collapse();
 });
 }
 if (item.body4LinkText) {
          $w("#body4Button").expand();
          $w("#body4Button").show();
 } else {
          $w("#body4Button").hide('fade').then(()=>{
          $w("#body4Button").collapse();
 });
 }
 if (item.bodyImage3) {
          $w("#ColumnStrip23, #BlankColumn11").expand();
          $w("#ColumnStrip23, #BlankColumn11").show('fade');
 } else {
          $w("#ColumnStrip23, #BlankColumn11").hide('fade').then(()=>{
          $w("#ColumnStrip23, #BlankColumn11").collapse();
 });
 }
 if (item.bodyImage3Caption) {
          $w("#BodyImage3Caption").expand();
          $w("#BodyImage3Caption").show('fade');
 } else {
          $w("#BodyImage3Caption").hide('fade').then(()=>{
          $w("#BodyImage3Caption").collapse();
 });
 }
 if (item.body5) {
          $w("#ColumnStrip2, #columnStrip24").expand();
          $w("#ColumnStrip2, #columnStrip24").show('fade');
 } else {
          $w("#ColumnStrip2, #columnStrip24").hide('fade').then(()=>{
          $w("#ColumnStrip2, #columnStrip24").collapse();
 });
 }
 if (item.body5LinkText) {
          $w("#body5Button").expand();
          $w("#body5Button").show('fade');
 } else {
          $w("#body5Button").hide('fade').then(()=>{
          $w("#body5Button").collapse();
 });
 }
 if (item.listBody1Title) {
          $w("#columnStrip22, #columnStrip23").expand();
          $w("#columnStrip22, #columnStrip23").show('fade');
 } else {
          $w("#columnStrip22, #columnStrip23").hide('fade').then(()=>{
          $w("#columnStrip22, #columnStrip23").collapse();
 });
 }
 if (item.listBody1) {
          $w("#columnStrip19, #columnStrip20").expand();
          $w("#columnStrip19, #columnStrip20").show('fade');
 } else {
          $w("#columnStrip19, #columnStrip20").hide('fade').then(()=>{
          $w("#columnStrip19, #columnStrip20").collapse();
 });
 }
 if (item.listBody1LinkText) {
          $w("#ListBody1Button").expand();
          $w("#ListBody1Button").show('fade');
 } else {
          $w("#ListBody1Button").hide('fade').then(()=>{
          $w("#ListBody1Button").collapse();
 });
 }
 if (item.listBody1Image) {
          $w("#columnStrip21, #columnStrip25").expand();
          $w("#columnStrip21, #columnStrip25").show('fade');
 } else {
          $w("#columnStrip21, #columnStrip25").hide('fade').then(()=>{
          $w("#columnStrip21, #columnStrip25").collapse();
 });
 }
 if (item.listBody1ImageCaption) {
          $w("#ListBody1ImageCaption").expand();
          $w("#ListBody1ImageCaption").show('fade');
 } else {
          $w("#ListBody1ImageCaption").hide('fade').then(()=>{
          $w("#ListBody1ImageCaption").collapse();
 });
 }
 if (item.listBody2Title) {
          $w("#columnStrip26, #columnStrip27").expand();
          $w("#columnStrip26, #columnStrip27").show('fade');
 } else {
          $w("#columnStrip26, #columnStrip27").hide('fade').then(()=>{
          $w("#columnStrip26, #columnStrip27").collapse();
 });
 }
 if (item.listBody2) {
          $w("#columnStrip28, #columnStrip29").expand();
          $w("#columnStrip28, #columnStrip29").show('fade');
 } else {
          $w("#columnStrip28, #columnStrip29").hide('fade').then(()=>{
          $w("#columnStrip28, #columnStrip29").collapse();
 });
 }
 if (item.listBody2LinkText) {
          $w("#ListBody2Button").expand();
          $w("#ListBody2Button").show('fade');
 } else {
          $w("#ListBody2Button").hide('fade').then(()=>{
          $w("#ListBody2Button").collapse();
 });
 }
 if (item.listBody2Image) {
          $w("#columnStrip30, #columnStrip31").expand();
          $w("#columnStrip30, #columnStrip31").show('fade');
 } else {
          $w("#columnStrip30, #columnStrip31").hide('fade').then(()=>{
          $w("#columnStrip30, #columnStrip31").collapse();
 });
 }
 if (item.listBody2ImageCaption) {
          $w("#ListBody2ImageCaption").expand();
          $w("#ListBody2ImageCaption").show('fade');
 } else {
          $w("#ListBody2ImageCaption").hide('fade').then(()=>{
          $w("#ListBody2ImageCaption").collapse();
 });
 }
 if (item.listBody3Title) {
          $w("#columnStrip32, #columnStrip33").expand();
          $w("#columnStrip32, #columnStrip33").show('fade');
 } else {
          $w("#columnStrip32, #columnStrip33").hide('fade').then(()=>{
          $w("#columnStrip32, #columnStrip33").collapse();
 });
 }
 
 
 continues below in code part 3

sophiechung91 · May 6, 2021, 9:50pm

 if (item.listBody3) {
          $w("#columnStrip34, #columnStrip35").expand();
          $w("#columnStrip34, #columnStrip35").show('fade');
 } else {
          $w("#columnStrip34, #columnStrip35").hide('fade').then(()=>{
          $w("#columnStrip34, #columnStrip35").collapse();
 });
 }
 if (item.listBody3LinkText) {
          $w("#ListBody3Button").expand();
          $w("#ListBody3Button").show('fade');
 } else {
          $w("#ListBody3Button").hide('fade').then(()=>{
          $w("#ListBody3Button").collapse();
 });
 }
 if (item.listBody3Image) {
          $w("#columnStrip36, #columnStrip37").expand();
          $w("#columnStrip36, #columnStrip37").show('fade');
 } else {
          $w("#columnStrip36, #columnStrip37").hide('fade').then(()=>{
          $w("#columnStrip36, #columnStrip37").collapse();
 });
 }
 if (item.listBody3Caption) {
          $w("#ListBody3ImageCaption").expand();
          $w("#ListBody3ImageCaption").show('fade');
 } else {
          $w("#ListBody3ImageCaption").hide('fade').then(()=>{
          $w("#ListBody3ImageCaption").collapse();
 });
 }
 if (item.listBody4Title) {
          $w("#columnStrip38, #columnStrip39").expand();
          $w("#columnStrip38, #columnStrip39").show('fade');
 } else {
          $w("#columnStrip38, #columnStrip39").hide('fade').then(()=>{
          $w("#columnStrip38, #columnStrip39").collapse();
 });
 }
 if (item.listBody4) {
          $w("#columnStrip40, #columnStrip41").expand();
          $w("#columnStrip40, #columnStrip41").show('fade');
 } else {
          $w("#columnStrip40, #columnStrip41").hide('fade').then(()=>{
          $w("#columnStrip40, #columnStrip41").collapse();
 });
 }
 if (item.listBody4LinkText) {
          $w("#ListBody4Button").expand();
          $w("#ListBody4Button").show('fade');
 } else {
          $w("#ListBody4Button").hide('fade').then(()=>{
          $w("#ListBody4Button").collapse();
 });
 }
 if (item.listBody4Image) {
          $w("#columnStrip42, #columnStrip43").expand();
          $w("#columnStrip42, #columnStrip43").show('fade');
 } else {
          $w("#columnStrip42, #columnStrip43").hide('fade').then(()=>{
          $w("#columnStrip42, #columnStrip43").collapse();
 });
 }
 if (item.listBody4Caption) {
          $w("#ListBody4Caption").expand();
          $w("#ListBody4Caption").show('fade');
 } else {
          $w("#ListBody4Caption").hide('fade').then(()=>{
          $w("#ListBody4Caption").collapse();
 });
 }
 if (item.listBody5Title) {
          $w("#columnStrip44, #columnStrip45").expand();
          $w("#columnStrip44, #columnStrip45").show('fade');
 } else {
          $w("#columnStrip44, #columnStrip45").hide('fade').then(()=>{
          $w("#columnStrip44, #columnStrip45").collapse();
 });
 }
 if (item.listBody5) {
          $w("#columnStrip46, #columnStrip47").expand();
          $w("#columnStrip46, #columnStrip47").show('fade');
 } else {
          $w("#columnStrip46, #columnStrip47").hide('fade').then(()=>{
          $w("#columnStrip46, #columnStrip47").collapse();
 });
 }
 if (item.listBody5LinkText) {
          $w("#ListBody5Button").expand();
          $w("#ListBody5Button").show('fade');
 } else {
          $w("#ListBody5Button").hide('fade').then(()=>{
          $w("#ListBody5Button").collapse();
 });
 }
 if (item.listBody5Image) {
          $w("#columnStrip48, #columnStrip49").expand();
          $w("#columnStrip48, #columnStrip49").show('fade');
 } else {
          $w("#columnStrip48, #columnStrip49").hide('fade').then(()=>{
          $w("#columnStrip48, #columnStrip49").collapse();
 });
 }
 if (item.listBody5ImageCaption) {
          $w("#ListBody5ImageCaption").expand();
          $w("#ListBody5ImageCaption").show('fade');
 } else {
          $w("#ListBody5ImageCaption").hide('fade').then(()=>{
          $w("#ListBody5ImageCaption").collapse();
 });
 }
 if (item.listBody6Title) {
          $w("#columnStrip50, #columnStrip51").expand();
          $w("#columnStrip50, #columnStrip51").show('fade');
 } else {
          $w("#columnStrip50, #columnStrip51").hide('fade').then(()=>{
          $w("#columnStrip50, #columnStrip51").collapse();
 });
 }
 if (item.listBody6) {
          $w("#columnStrip52, #columnStrip53").expand();
          $w("#columnStrip52, #columnStrip53").show('fade');
 } else {
          $w("#columnStrip52, #columnStrip53").hide('fade').then(()=>{
          $w("#columnStrip52, #columnStrip53").collapse();
 });
 }
 if (item.listBody6LinkText) {
          $w("#ListBody6Button").expand();
          $w("#ListBody6Button").show('fade');
 } else {
          $w("#ListBody6Button").hide('fade').then(()=>{
          $w("#ListBody6Button").collapse();
 });
 }
 if (item.listBody6Image) {
          $w("#columnStrip54, #columnStrip55").expand();
          $w("#columnStrip54, #columnStrip55").show('fade');
 } else {
          $w("#columnStrip54, #columnStrip55").hide('fade').then(()=>{
          $w("#columnStrip54, #columnStrip55").collapse();
 });
 }
 if (item.listBody6Caption) {
          $w("#ListBody6ImageCaption").expand();
          $w("#ListBody6ImageCaption").show('fade');
 } else {
          $w("#ListBody6ImageCaption").hide('fade').then(()=>{
          $w("#ListBody6ImageCaption").collapse();
 });
 }
 if (item.listBody7Title) {
          $w("#columnStrip56, #columnStrip57").expand();
          $w("#columnStrip56, #columnStrip57").show('fade');
 } else {
          $w("#columnStrip56, #columnStrip57").hide('fade').then(()=>{
          $w("#columnStrip56, #columnStrip57").collapse();
 });
 }
 if (item.listBody7) {
          $w("#columnStrip58, #columnStrip59").expand();
          $w("#columnStrip58, #columnStrip59").show('fade');
 } else {
          $w("#columnStrip58, #columnStrip59").hide('fade').then(()=>{
          $w("#columnStrip58, #columnStrip59").collapse();
 });
 }
 if (item.listBody7LinkText) {
          $w("#ListBody7Button").expand();
          $w("#ListBody7Button").show('fade');
 } else {
          $w("#ListBody7Button").hide('fade').then(()=>{
          $w("#ListBody7Button").collapse();
 });
 }
 if (item.listBody7Image) {
          $w("#columnStrip60, #columnStrip61").expand();
          $w("#columnStrip60, #columnStrip61").show('fade');
 } else {
          $w("#columnStrip60, #columnStrip61").hide('fade').then(()=>{
          $w("#columnStrip60, #columnStrip61").collapse();
 });
 }
 if (item.listBody7ImageCaption) {
          $w("#ListBody7ImageCaption").expand();
          $w("#ListBody7ImageCaption").show('fade');
 } else {
          $w("#ListBody7ImageCaption").hide('fade').then(()=>{
          $w("#ListBody7ImageCaption").collapse();
 });
 }
 if (item.listBody8Title) {
          $w("#columnStrip62, #columnStrip63").expand();
          $w("#columnStrip62, #columnStrip63").show('fade');
 } else {
          $w("#columnStrip62, #columnStrip63").hide('fade').then(()=>{
          $w("#columnStrip62, #columnStrip63").collapse();
 });
 }
 if (item.listBody8) {
          $w("#columnStrip64, #columnStrip65").expand();
          $w("#columnStrip64, #columnStrip65").show('fade');
 } else {
          $w("#columnStrip64, #columnStrip65").hide('fade').then(()=>{
          $w("#columnStrip64, #columnStrip65").collapse();
 });
 }
 if (item.listBody8LinkText) {
          $w("#ListBody8Button").expand();
          $w("#ListBody8Button").show('fade');
 } else {
          $w("#ListBody8Button").hide('fade').then(()=>{
          $w("#ListBody8Button").collapse();
 });
 }
 if (item.listBody8Image) {
          $w("#columnStrip66, #columnStrip67").expand();
          $w("#columnStrip66, #columnStrip67").show('fade');
 } else {
          $w("#columnStrip66, #columnStrip67").hide('fade').then(()=>{
          $w("#columnStrip66, #columnStrip67").collapse();
 });
 }
 if (item.listBody8ImageCaption) {
          $w("#ListBody8ImageCaption").expand();
          $w("#ListBody8ImageCaption").show('fade');
 } else {
          $w("#ListBody8ImageCaption").hide('fade').then(()=>{
          $w("#ListBody8ImageCaption").collapse();
 });
 }
 if (item.listBody9Title) {
          $w("#columnStrip68, #columnStrip69").expand();
          $w("#columnStrip68, #columnStrip69").show('fade');
 } else {
          $w("#columnStrip68, #columnStrip69").hide('fade').then(()=>{
          $w("#columnStrip68, #columnStrip69").collapse();
 });
 }
 if (item.listBody9) {
          $w("#columnStrip70, #columnStrip71").expand();
          $w("#columnStrip70, #columnStrip71").show('fade');
 } else {
          $w("#columnStrip70, #columnStrip71").hide('fade').then(()=>{
          $w("#columnStrip70, #columnStrip71").collapse();
 });
 }
 if (item.listBody9LinkText) {
          $w("#ListBody9Button").expand();
          $w("#ListBody9Button").show('fade');
 } else {
          $w("#ListBody9Button").hide('fade').then(()=>{
          $w("#ListBody9Button").collapse();
 });
 }
 if (item.listBody9Image) {
          $w("#columnStrip72, #columnStrip73").expand();
          $w("#columnStrip72, #columnStrip73").show('fade');
 } else {
          $w("#columnStrip72, #columnStrip73").hide('fade').then(()=>{
          $w("#columnStrip72, #columnStrip73").collapse();
 });
 }
 if (item.listBody9ImageCaption) {
          $w("#ListBody9ImageCaption").expand();
          $w("#ListBody9ImageCaption").show('fade');
 } else {
          $w("#ListBody9ImageCaption").hide('fade').then(()=>{
          $w("#ListBody9ImageCaption").collapse();
 });
 }
 if (item.listBody10Title) {
          $w("#columnStrip74, #columnStrip75").expand();
          $w("#columnStrip74, #columnStrip75").show('fade');
 } else {
          $w("#columnStrip74, #columnStrip75").hide('fade').then(()=>{
          $w("#columnStrip74, #columnStrip75").collapse();
 });
 }
 if (item.listBody10) {
          $w("#columnStrip76, #columnStrip77").expand();
          $w("#columnStrip76, #columnStrip77").show('fade');
 } else {
          $w("#columnStrip76, #columnStrip77").hide('fade').then(()=>{
          $w("#columnStrip76, #columnStrip77").collapse();
 });
 }
 if (item.listBody10LinkText) {
          $w("#ListBody10Button").expand();
          $w("#ListBody10Button").show('fade');
 } else {
          $w("#ListBody10Button").hide('fade').then(()=>{
          $w("#ListBody10Button").collapse();
 });
 }
 if (item.listBody10Image) {
          $w("#columnStrip78, #columnStrip79").expand();
          $w("#columnStrip78, #columnStrip79").show('fade');
 } else {
          $w("#columnStrip78, #columnStrip79").hide('fade').then(()=>{
          $w("#columnStrip78, #columnStrip79").collapse();
 });
 }
 
 continues below in code part 4

sophiechung91 · May 6, 2021, 9:50pm

if (item.listBody10ImageCaption) {
          $w("#ListBody10ImageCaption").expand();
          $w("#ListBody10ImageCaption").show('fade');
 } else {
          $w("#ListBody10ImageCaption").hide('fade').then(()=>{
          $w("#ListBody10ImageCaption").collapse();
 });
 }
 if (item.listBody11Title) {
          $w("#columnStrip80, #columnStrip81").expand();
          $w("#columnStrip80, #columnStrip81").show('fade');
 } else {
          $w("#columnStrip80, #columnStrip81").hide('fade').then(()=>{
          $w("#columnStrip80, #columnStrip81").collapse();
 });
 }
 if (item.listBody11) {
          $w("#columnStrip82, #columnStrip83").expand();
          $w("#columnStrip82, #columnStrip83").show('fade');
 } else {
          $w("#columnStrip82, #columnStrip83").hide('fade').then(()=>{
          $w("#columnStrip82, #columnStrip83").collapse();
 });
 }
 if (item.listBody11LinkText) {
          $w("#ListBody11Button").expand();
          $w("#ListBody11Button").show('fade');
 } else {
          $w("#ListBody11Button").hide('fade').then(()=>{
          $w("#ListBody11Button").collapse();
 });
 }
 if (item.listBody11Image) {
          $w("#columnStrip84, #columnStrip85").expand();
          $w("#columnStrip84, #columnStrip85").show('fade');
 } else {
          $w("#columnStrip84, #columnStrip85").hide('fade').then(()=>{
          $w("#columnStrip84, #columnStrip85").collapse();
 });
 }
 if (item.listBody11ImageCaption) {
          $w("#ListBody11ImageCaption").expand();
          $w("#ListBody11ImageCaption").show('fade');
 } else {
          $w("#ListBody11ImageCaption").hide('fade').then(()=>{
          $w("#ListBody11ImageCaption").collapse();
 });
 }
 if (item.listBody12Title) {
          $w("#columnStrip86, #columnStrip87").expand();
          $w("#columnStrip86, #columnStrip87").show('fade');
 } else {
          $w("#columnStrip86, #columnStrip87").hide('fade').then(()=>{
          $w("#columnStrip86, #columnStrip87").collapse();
 });
 }
 if (item.listBody12) {
          $w("#columnStrip88, #columnStrip89").expand();
          $w("#columnStrip88, #columnStrip89").show('fade');
 } else {
          $w("#columnStrip88, #columnStrip89").hide('fade').then(()=>{
          $w("#columnStrip88, #columnStrip89").collapse();
 });
 }
 if (item.listBody12LinkText) {
          $w("#ListBody12Button").expand();
          $w("#ListBody12Button").show('fade');
 } else {
          $w("#ListBody12Button").hide('fade').then(()=>{
          $w("#ListBody12Button").collapse();
 });
 }
 if (item.listBody12Image) {
          $w("#columnStrip90, #columnStrip91").expand();
          $w("#columnStrip90, #columnStrip91").show('fade');
 } else {
          $w("#columnStrip90, #columnStrip91").hide('fade').then(()=>{
          $w("#columnStrip90, #columnStrip91").collapse();
 });
 }
 if (item.listBody12ImageCaption) {
          $w("#ListBody12ImageCaption").expand();
          $w("#ListBody12ImageCaption").show('fade');
 } else {
          $w("#ListBody12ImageCaption").hide('fade').then(()=>{
          $w("#ListBody12ImageCaption").collapse();
 });
 }
 if (item.listBody13Title) {
          $w("#columnStrip92, #columnStrip93").expand();
          $w("#columnStrip92, #columnStrip93").show('fade');
 } else {
          $w("#columnStrip92, #columnStrip93").hide('fade').then(()=>{
          $w("#columnStrip92, #columnStrip93").collapse();
 });
 }
 if (item.listBody13) {
          $w("#columnStrip94, #columnStrip95").expand();
          $w("#columnStrip94, #columnStrip95").show('fade');
 } else {
          $w("#columnStrip94, #columnStrip95").hide('fade').then(()=>{
          $w("#columnStrip94, #columnStrip95").collapse();
 });
 }
 if (item.listBody13LinkText) {
          $w("#ListBody13Button").expand();
          $w("#ListBody13Button").show();
 } else {
          $w("#ListBody13Button").hide('fade').then(()=>{
          $w("#ListBody13Button").collapse();
 });
 }
 if (item.listBody13Image) {
          $w("#columnStrip96, #columnStrip97").expand();
          $w("#columnStrip96, #columnStrip97").show('fade');
 } else {
          $w("#columnStrip96, #columnStrip97").hide('fade').then(()=>{
          $w("#columnStrip96, #columnStrip97").collapse();
 });
 }
 if (item.listBody13ImageCaption) {
          $w("#ListBody13ImageCaption").expand();
          $w("#ListBody13ImageCaption").show('fade');
 } else {
          $w("#ListBody13ImageCaption").hide('fade').then(()=>{
          $w("#ListBody13ImageCaption").collapse();
 });
 }
 if (item.listBody14Title) {
          $w("#columnStrip98, #columnStrip99").expand();
          $w("#columnStrip98, #columnStrip99").show('fade');
 } else {
          $w("#columnStrip98, #columnStrip99").hide('fade').then(()=>{
          $w("#columnStrip98, #columnStrip99").collapse();
 });
 }
 if (item.listBody14) {
          $w("#columnStrip100, #columnStrip101").expand();
          $w("#columnStrip100, #columnStrip101").show('fade');
 } else {
          $w("#columnStrip100, #columnStrip101").hide('fade').then(()=>{
          $w("#columnStrip100, #columnStrip101").collapse();
 });
 }
 if (item.listBody14LinkText) {
          $w("#ListBody14Button").expand();
          $w("#ListBody14Button").show('fade');
 } else {
          $w("#ListBody14Button").hide('fade').then(()=>{
          $w("#ListBody14Button").collapse();
 });
 }
 if (item.listBody14Image) {
          $w("#columnStrip102, #columnStrip103").expand();
          $w("#columnStrip102, #columnStrip103").show('fade');
 } else {
          $w("#columnStrip102, #columnStrip103").hide('fade').then(()=>{
          $w("#columnStrip102, #columnStrip103").collapse();
 });
 }
 if (item.listBody14ImageCaption) {
          $w("#ListBody14ImageCaption").expand();
          $w("#ListBody14ImageCaption").show('fade');
 } else {
          $w("#ListBody14ImageCaption").hide('fade').then(()=>{
          $w("#ListBody14ImageCaption").collapse();
 });
 }
 if (item.listBody15Title) {
          $w("#columnStrip104, #columnStrip105").expand();
          $w("#columnStrip104, #columnStrip105").show('fade');
 } else {
          $w("#columnStrip104, #columnStrip105").hide('fade').then(()=>{
          $w("#columnStrip104, #columnStrip105").collapse();
 });
 }
 if (item.listBody15) {
          $w("#columnStrip106, #columnStrip107").expand();
          $w("#columnStrip106, #columnStrip107").show('fade');
 } else {
          $w("#columnStrip106, #columnStrip107").hide('fade').then(()=>{
          $w("#columnStrip106, #columnStrip107").collapse();
 });
 }
 if (item.listBody15LinkText) {
          $w("#ListBody15Button").expand();
          $w("#ListBody15Button").show('fade');
 } else {
          $w("#ListBody15Button").hide('fade').then(()=>{
          $w("#ListBody15Button").collapse();
 });
 }
 if (item.listBody15Image) {
          $w("#columnStrip108, #columnStrip109").expand();
          $w("#columnStrip108, #columnStrip109").show('fade');
 } else {
          $w("#columnStrip108, #columnStrip109").hide('fade').then(()=>{
          $w("#columnStrip108, #columnStrip109").collapse();
 });
 }
 if (item.listBody15ImageCaption) {
          $w("#ListBody15ImageCaption").expand();
          $w("#ListBody15ImageCaption").show('fade');
 } else {
          $w("#ListBody15ImageCaption").hide('fade').then(()=>{
          $w("#ListBody15ImageCaption").collapse();
 });
 }
 if (item.listBody16Title) {
          $w("#columnStrip110, #columnStrip111").expand();
          $w("#columnStrip110, #columnStrip111").show('fade');
 } else {
          $w("#columnStrip110, #columnStrip111").hide('fade').then(()=>{
          $w("#columnStrip110, #columnStrip111").collapse();
 });
 }
  continues in code part 5 below

sophiechung91 · May 6, 2021, 9:51pm

if (item.listBody16) {
          $w("#columnStrip112, #columnStrip113").expand();
          $w("#columnStrip112, #columnStrip113").show('fade');
 } else {
          $w("#columnStrip112, #columnStrip113").hide('fade').then(()=>{
          $w("#columnStrip112, #columnStrip113").collapse();
 });
 }
 if (item.listBody16LinkText) {
          $w("#ListBody16Button").expand();
          $w("#ListBody16Button").show('fade');
 } else {
          $w("#ListBody16Button").hide('fade').then(()=>{
          $w("#ListBody16Button").collapse();
 });
 }
 if (item.listBody16Image) {
          $w("#columnStrip114, #columnStrip115").expand();
          $w("#columnStrip114, #columnStrip115").show('fade');
 } else {
          $w("#columnStrip114, #columnStrip115").hide('fade').then(()=>{
          $w("#columnStrip114, #columnStrip115").collapse();
 });
 }
 if (item.listBody16ImageCaption) {
          $w("#ListBody16ImageCaption").expand();
          $w("#ListBody16ImageCaption").show('fade');
 } else {
          $w("#ListBody16ImageCaption").hide('fade').then(()=>{
          $w("#ListBody16ImageCaption").collapse();
 });
 }
 if (item.listBody17Title) {
          $w("#columnStrip116, #columnStrip117").expand();
          $w("#columnStrip116, #columnStrip117").show('fade');
 } else {
          $w("#columnStrip116, #columnStrip117").hide('fade').then(()=>{
          $w("#columnStrip116, #columnStrip117").collapse();
 });
 }
 if (item.listBody17) {
          $w("#columnStrip118, #columnStrip119").expand();
          $w("#columnStrip118, #columnStrip119").show('fade');
 } else {
          $w("#columnStrip118, #columnStrip119").hide('fade').then(()=>{
          $w("#columnStrip118, #columnStrip119").collapse();
 });
 }
 if (item.listBody17LinkText) {
          $w("#ListBody17Button").expand();
          $w("#ListBody17Button").show('fade');
 } else {
          $w("#ListBody17Button").hide('fade').then(()=>{
          $w("#ListBody17Button").collapse();
 });
 }
 if (item.listBody17Image) {
          $w("#columnStrip120, #columnStrip121").expand();
          $w("#columnStrip120, #columnStrip121").show('fade');
 } else {
          $w("#columnStrip120, #columnStrip121").hide('fade').then(()=>{
          $w("#columnStrip120, #columnStrip121").collapse();
 });
 }
 if (item.listBody17ImageCaption) {
          $w("#ListBody17ImageCaption").expand();
          $w("#ListBody17ImageCaption").show('fade');
 } else {
          $w("#ListBody17ImageCaption").hide('fade').then(()=>{
          $w("#ListBody17ImageCaption").collapse();
 });
 }
 if (item.listBody18Title) {
          $w("#columnStrip122, #columnStrip123").expand();
          $w("#columnStrip122, #columnStrip123").show('fade');
 } else {
          $w("#columnStrip122, #columnStrip123").hide('fade').then(()=>{
          $w("#columnStrip122, #columnStrip123").collapse();
 });
 }
 if (item.listBody18) {
          $w("#columnStrip124, #columnStrip125").expand();
          $w("#columnStrip124, #columnStrip125").show('fade');
 } else {
          $w("#columnStrip124, #columnStrip125").hide('fade').then(()=>{
          $w("#columnStrip124, #columnStrip125").collapse();
 });
 }
 if (item.listBody18LinkText) {
          $w("#ListBody18Button").expand();
          $w("#ListBody18Button").show('fade');
 } else {
          $w("#ListBody18Button").hide('fade').then(()=>{
          $w("#ListBody18Button").collapse();
 });
 }
 if (item.listBody18Image) {
          $w("#columnStrip126, #columnStrip127").expand();
          $w("#columnStrip126, #columnStrip127").show('fade');
 } else {
          $w("#columnStrip126, #columnStrip127").hide('fade').then(()=>{
          $w("#columnStrip126, #columnStrip127").collapse();
 });
 }
 if (item.listBody18ImageCaption) {
          $w("#ListBody18ImageCaption").expand();
          $w("#ListBody18ImageCaption").show();
 } else {
          $w("#ListBody18ImageCaption").hide('fade').then(()=>{
          $w("#ListBody18ImageCaption").collapse();
 });
 }
 if (item.listBody19Title) {
          $w("#columnStrip128, #columnStrip129").expand();
          $w("#columnStrip128, #columnStrip129").show('fade');
 } else {
          $w("#columnStrip128, #columnStrip129").hide('fade').then(()=>{
          $w("#columnStrip128, #columnStrip129").collapse();
 });
 }
 if (item.listBody19) {
          $w("#columnStrip130, #columnStrip131").expand();
          $w("#columnStrip130, #columnStrip131").show('fade');
 } else {
          $w("#columnStrip130, #columnStrip131").hide('fade').then(()=>{
          $w("#columnStrip130, #columnStrip131").collapse();
 });
 }
 if (item.listBody19LinkText) {
          $w("#ListBody19Button").expand();
          $w("#ListBody19Button").show('fade');
 } else {
          $w("#ListBody19Button").hide('fade').then(()=>{
          $w("#ListBody19Button").collapse();
 });
 }
 if (item.listBody19Image) {
          $w("#columnStrip132, #columnStrip133").expand();
          $w("#columnStrip132, #columnStrip133").show('fade');
 } else {
          $w("#columnStrip132, #columnStrip133").hide('fade').then(()=>{
          $w("#columnStrip132, #columnStrip133").collapse();
 });
 }
 if (item.listBody19ImageCaption) {
          $w("#ListBody19ImageCaption").expand();
          $w("#ListBody19ImageCaption").show('fade');
 } else {
          $w("#ListBody19ImageCaption").hide('fade').then(()=>{
          $w("#ListBody19ImageCaption").collapse();
 });
 }
 if (item.listBody20Title) {
          $w("#columnStrip134, #columnStrip135").expand();
          $w("#columnStrip134, #columnStrip135").show('fade');
 } else {
          $w("#columnStrip134, #columnStrip135").hide('fade').then(()=>{
          $w("#columnStrip134, #columnStrip135").collapse();
 });
 }
 if (item.listBody20) {
          $w("#columnStrip136, #columnStrip137").expand();
          $w("#columnStrip136, #columnStrip137").show('fade');
 } else {
          $w("#columnStrip136, #columnStrip137").hide('fade').then(()=>{
          $w("#columnStrip136, #columnStrip137").collapse();
 });
 }
 if (item.listBody20LinkText) {
          $w("#ListBody20Button").expand();
          $w("#ListBody20Button").show('fade');
 } else {
          $w("#ListBody20Button").hide('fade').then(()=>{
          $w("#ListBody20Button").collapse();
 });
 }
 if (item.listBody20Image) {
          $w("#columnStrip138, #columnStrip139").expand();
          $w("#columnStrip138, #columnStrip139").show('fade');
 } else {
          $w("#columnStrip138, #columnStrip139").hide('fade').then(()=>{
          $w("#columnStrip138, #columnStrip139").collapse();
 });
 }
 if (item.listBody20Caption) {
          $w("#ListBody20ImageCaption").expand();
          $w("#ListBody20ImageCaption").show('fade');
 } else {
          $w("#ListBody20ImageCaption").hide('fade').then(()=>{
          $w("#ListBody20ImageCaption").collapse();
 });
 }
 if (item.listBody21Title) {
          $w("#columnStrip140, #columnStrip141").expand();
          $w("#columnStrip140, #columnStrip141").show('fade');
 } else {
          $w("#columnStrip140, #columnStrip141").hide('fade').then(()=>{
          $w("#columnStrip140, #columnStrip141").collapse();
 });
 }
 if (item.listBody21) {
          $w("#columnStrip142, #columnStrip143").expand();
          $w("#columnStrip142, #columnStrip143").show('fade');
 } else {
          $w("#columnStrip142, #columnStrip143").hide('fade').then(()=>{
          $w("#columnStrip142, #columnStrip143").collapse();
 });
 }
 if (item.listBody21LinkText) {
          $w("#ListBody21Button").expand();
          $w("#ListBody21Button").show('fade');
 } else {
          $w("#ListBody21Button").hide('fade').then(()=>{
          $w("#ListBody21Button").collapse();
 });
 }
 if (item.listBody21Image) {
          $w("#columnStrip144, #columnStrip145").expand();
          $w("#columnStrip144, #columnStrip145").show('fade');
 } else {
          $w("#columnStrip144, #columnStrip145").hide('fade').then(()=>{
          $w("#columnStrip144, #columnStrip145").collapse();
 });
 }
 continues in code part 6 below

sophiechung91 · May 6, 2021, 9:51pm

 if (item.listBody21ImageCaption) {
          $w("#ListBody21ImageCaption").expand();
          $w("#ListBody21ImageCaption").show('fade');
 } else {
          $w("#ListBody21ImageCaption").hide('fade').then(()=>{
          $w("#ListBody21ImageCaption").collapse();
 });
 }
 if (item.listBody22Title) {
          $w("#columnStrip146, #columnStrip147").expand();
          $w("#columnStrip146, #columnStrip147").show('fade');
 } else {
          $w("#columnStrip146, #columnStrip147").hide('fade').then(()=>{
          $w("#columnStrip146, #columnStrip147").collapse();
 });
 }
 if (item.listBody22) {
          $w("#columnStrip148, #columnStrip149").expand();
          $w("#columnStrip148, #columnStrip149").show('fade');
 } else {
          $w("#columnStrip148, #columnStrip149").hide('fade').then(()=>{
          $w("#columnStrip148, #columnStrip149").collapse();
 });
 }
 if (item.listBody22LinkText) {
          $w("#ListBody22Button").expand();
          $w("#ListBody22Button").show('fade');
 } else {
          $w("#ListBody22Button").hide('fade').then(()=>{
          $w("#ListBody22Button").collapse();
 });
 }
 if (item.listBody22Image) {
          $w("#columnStrip150, #columnStrip151").expand();
          $w("#columnStrip150, #columnStrip151").show('fade');
 } else {
          $w("#columnStrip150, #columnStrip151").hide('fade').then(()=>{
          $w("#columnStrip150, #columnStrip151").collapse();
 });
 }
 if (item.listBody22ImageCaption) {
          $w("#ListBody22ImageCaption").expand();
          $w("#ListBody22ImageCaption").show('fade');
 } else {
          $w("#ListBody22ImageCaption").hide('fade').then(()=>{
          $w("#ListBody22ImageCaption").collapse();
 });
 }
 if (item.listBody23Title) {
          $w("#columnStrip152, #columnStrip153").expand();
          $w("#columnStrip152, #columnStrip153").show('fade');
 } else {
          $w("#columnStrip152, #columnStrip153").hide('fade').then(()=>{
          $w("#columnStrip152, #columnStrip153").collapse();
 });
 }
 if (item.listBody23) {
          $w("#columnStrip154, #columnStrip155").expand();
          $w("#columnStrip154, #columnStrip155").show('fade');
 } else {
          $w("#columnStrip154, #columnStrip155").hide('fade').then(()=>{
          $w("#columnStrip154, #columnStrip155").collapse();
 });
 }
 if (item.listBody23LinkText) {
          $w("#ListBody23Button").expand();
          $w("#ListBody23Button").show('fade');
 } else {
          $w("#ListBody23Button").hide('fade').then(()=>{
          $w("#ListBody23Button").collapse();
 });
 }
 if (item.listBody23Image) {
          $w("#columnStrip156, #columnStrip157").expand();
          $w("#columnStrip156, #columnStrip157").show('fade');
 } else {
          $w("#columnStrip156, #columnStrip157").hide('fade').then(()=>{
          $w("#columnStrip156, #columnStrip157").collapse();
 });
 }
 if (item.listBody23ImageCaption) {
          $w("#ListBody23ImageCaption").expand();
          $w("#ListBody23ImageCaption").show('fade');
 } else {
          $w("#ListBody23ImageCaption").hide('fade').then(()=>{
          $w("#ListBody23ImageCaption").collapse();
 });
 if (item.listBody24Title) {
          $w("#columnStrip158, #columnStrip159").expand();
          $w("#columnStrip158, #columnStrip159").show('fade');
 } else {
          $w("#columnStrip158, #columnStrip159").hide('fade').then(()=>{
          $w("#columnStrip158, #columnStrip159").collapse();
 });
 }
 if (item.listBody24) {
          $w("#columnStrip160, #columnStrip161").expand();
          $w("#columnStrip160, #columnStrip161").show('fade');
 } else {
          $w("#columnStrip160, #columnStrip161").hide('fade').then(()=>{
          $w("#columnStrip160, #columnStrip161").collapse();
 });
 }
 if (item.listBody24LinkText) {
          $w("#ListBody24Button").expand();
          $w("#ListBody24Button").show('fade');
 } else {
          $w("#ListBody24Button").hide('fade').then(()=>{
          $w("#ListBody24Button").collapse();
 });
 }
 if (item.listBody24Image) {
          $w("#columnStrip162, #columnStrip163").expand();
          $w("#columnStrip162, #columnStrip163").show('fade');
 } else {
          $w("#columnStrip162, #columnStrip163").hide('fade').then(()=>{
          $w("#columnStrip162, #columnStrip163").collapse();
 });
 }
 if (item.listBody24ImageCaption) {
          $w("#ListBody24ImageCaption").expand();
          $w("#ListBody24ImageCaption").show('fade');
 } else {
          $w("#ListBody24ImageCaption").hide('fade').then(()=>{
          $w("#ListBody24ImageCaption").collapse();
 });
 }
 if (item.listBody25Title) {
          $w("#columnStrip164, #columnStrip165").expand();
          $w("#columnStrip164, #columnStrip165").show('fade');
 } else {
          $w("#columnStrip164, #columnStrip165").hide('fade').then(()=>{
          $w("#columnStrip164, #columnStrip165").collapse();
 });
 }
 if (item.listBody25) {
          $w("#columnStrip166, #columnStrip167").expand();
          $w("#columnStrip166, #columnStrip167").show('fade');
 } else {
          $w("#columnStrip166, #columnStrip167").hide('fade').then(()=>{
          $w("#columnStrip166, #columnStrip167").collapse();
 });
 }
 if (item.listBody2LinkText) {
          $w("#ListBody25Button").expand();
          $w("#ListBody25Button").show('fade');
 } else {
          $w("#ListBody25Button").hide('fade').then(()=>{
          $w("#ListBody25Button").collapse();
 });
 }
 if (item.listBody25Image) {
          $w("#columnStrip168, #columnStrip169").expand();
          $w("#columnStrip168, #columnStrip169").show('fade');
 } else {
          $w("#columnStrip168, #columnStrip169").hide('fade').then(()=>{
          $w("#columnStrip168, #columnStrip169").collapse();
 });
 }
 if (item.listBody25ImageCaption) {
          $w("#ListBody25ImageCaption").expand();
          $w("#ListBody25ImageCaption").show('fade');
 } else {
          $w("#ListBody25ImageCaption").hide('fade').then(()=>{
          $w("#ListBody25ImageCaption").collapse();
 });
 }
 if (item.listBodySummaryTitle) {
          $w("#columnStrip170, #columnStrip171").expand();
          $w("#columnStrip170, #columnStrip171").show('fade');
 } else {
          $w("#columnStrip170, #columnStrip171").hide('fade').then(()=>{
          $w("#columnStrip170, #columnStrip171").collapse();
 });
 }
 if (item.listBodySummary) {
          $w("#columnStrip172, #BlankColumn12").expand();
          $w("#columnStrip172, #BlankColumn12").show('fade');
 } else {
          $w("#columnStrip172, #BlankColumn12").hide('fade').then(()=>{
          $w("#columnStrip172, #BlankColumn12").collapse();
 });
 }
 }})});

CODE-NINJA · May 6, 2021, 10:18pm

On my opinion still too long
Perhaps you can generate a loop, which could zip your code.
But you eventually would have to rename your element-IDs, to put a better systematic structure into your project.

But if it works like that for you, it is also ok.

code-queen · May 6, 2021, 10:27pm

Also … I don’t think it is necessary to .hide if the code is already using .collapse . Use one or the other, not both.

CODE-NINJA · May 6, 2021, 10:46pm

@code-queen
If animations are used, it would be ugly → not to use hide() before collapse.
Without animations —> i agree!

BTW: nice to see you again (welcome back).

sophiechung91 · May 7, 2021, 3:22am

@russian-dima ooh generate a loop which could zip my code - this sounds like something very useful for me to learn. Would you be able to please point me to the right place to learn how to do this? Thanks again btw - you’ve already helped me further develop my coding ability quite a bit over the last two weeks!

CODE-NINJA · May 7, 2021, 3:34pm

@sophiechung91

STEP-1 : Give your project (all your elements) a systematic structure…

Example: Old-structure → messy and chaotic structure…

if (item.body1) {
   $w("#columnStrip173, #Body1, #BlankColumn2").expand();
   $w("#columnStrip173, #Body1, #BlankColumn2").show('fade');
} 
else {
   $w("#Body1, #columnStrip173, #BlankColumn2").hide('fade')
   .then(()=>{$w("#Body1, #columnStrip173, #BlankColumn2").collapse();});
}

Transformation to a systematic structure…

if (item.body1) {
   $w("#stripbody1, #body1, #blankbody1").expand();
   $w("#stripbody1, #body1, #blankbody1").show('fade');
} 
else {
   $w("#stripbody1, #body1, #blankbody1").hide('fade')
  .then(()=>{$w("#stripbody1, #body1, #blankbody1").collapse();});
}

Do you see the difference?

STEP-2: giving more structure and systematic pattern…

let item1 = "body" 

if (item.body1) {
   $w("#strip"+item1, "#"+item1, "#blank"+item1).expand();
   $w("#strip"+item1, "#"+item1, "#blank"+item1).show('fade');
} 
else {
   $w("#strip"+item1, "#"+item1, "#blank"+item1).hide('fade')
  .then(()=>{$w("#strip"+item1, "#"+item1, "#blank"+item1).collapse();});
}

And whats now the advantage ???

You could put it now into a → For-Loop, like this…

let items = ["body"]

for (var i = 0; i<1; i++){
   if (items[i]) {
     $w("#strip"+items[i], "#"+items[i], "#blank"+items[i]).expand();
     $w("#strip"+items[i], "#"+items[i], "#blank"+items[i]).show('fade');
   } 
   else {
     $w("#strip"+items[i], "#"+items[i], "#blank"+items[i]).hide('fade')
     .then(()=>{$w("#strip"+items[i], "#"+items[i], "#blank"+items[i]).collapse();});
   }
}

As you can see i also changed …from…(single-item)…

let item1 = "body"

…to… (an Array, because we will now have several items in it…

let items = ["body"]

You still can follow?

STEP-3:
Pushing all my items into my —> ITEMS-ARRAY called —> “items”

let items = ["body", "blog1LinkText", "subtitle"] //...and so on....

You have now 3-items in your array —> the array-length is now —> 2
Why 2 ? —> Because the first index of an ARRAY is always —> 0

items [0] —> “body”
items [1] —> “blog1LinkText”
items [2] —> “subtitle”

…and so on…

Now all you have to do is to rename all the other elements and give them the same structure.

Your code would be zipped from about 1200-code-lines —> to just less than 100!

Yes! This is all the magic, when you start your project emmidiately creating with a good structure and systematic way of coding!

COMPARISON: —> OLD & NEW ! …

OLD:

if (item.body1) {
                $w("#columnStrip173, #Body1, #BlankColumn2").expand();
                $w("#columnStrip173, #Body1, #BlankColumn2").show('fade');
 } else {
            $w("#Body1, #columnStrip173, #BlankColumn2").hide('fade')
 .then(()=>{
                $w("#Body1, #columnStrip173, #BlankColumn2").collapse();
 });
 }

 if (item.blog1LinkText) {
            $w("#body1Button, #columnStrip174").expand();
            $w("#body1Button, #columnStrip174").show('fade');
 } else {
            $w("#columnStrip174, #body1Button").hide('fade')
 .then(()=>{
                $w("#columnStrip174, #body1Button").collapse();
 });
 }
 if (item.subtitle) {
            $w("#ListStrip, #columnStrip176").expand()
            $w("#ListStrip, #columnStrip176").show('fade');
 } else {
            $w("#ListStrip, #columnStrip176").hide('fade')
 .then(()=>{
                $w("#ListStrip, #columnStrip176").collapse();
 });
 }

NEW:

let items = ["body", "blog1LinkText", "subtitle"]

for (var i = 0; i<items.length; i++){
   if (items[i]) {
     $w("#strip"+items[i], "#"+items[i], "#blank"+items[i]).expand();
     $w("#strip"+items[i], "#"+items[i], "#blank"+items[i]).show('fade');
   } 
   else {
     $w("#strip"+items[i], "#"+items[i], "#blank"+items[i]).hide('fade')
     .then(()=>{$w("#strip"+items[i], "#"+items[i], "#blank"+items[i]).collapse();});
   }
}

Ohhh, i forgot to mention about the length and it’s function in this case.
Why you need the length of the “items”-array???

for(var i =0; i<items.length; i++){

Of course! You need it to get the count of the items inside the array.

Now the → LOOP knows, how much loopings has to be done by the → For-Loop

Good luck and happy coding!