Collapsible Code not working

Ask the community
, ,
1

Hello! I’m trying to create collapsible sections for my FAQ’s o my About page. I’ve implemented the following the code:

$w . onReady ( function  () { 
    $w ( '#stepOneCollapseButton' ). onClick (() => { 
        toggleBox ( $w ( '#stepOneCollapsibleStrip' ),  $w ( '#stepOnePlusSign' ),  $w ( '#stepOneMinusSign' )); 
    }); 
}); 

function  toggleBox ( boxElement ,  plusSign ,  minusSign ) { 
    const  isCollapsed  =  boxElement . collapsed ; 
    if  ( isCollapsed ) { 
        plusSign . hide (); 
        minusSign . show (); 
        boxElement . expand (); 
    }  **else**  { 
        minusSign . hide (); 
        plusSign . show (); 
        boxElement . collapse (); 
    }

};

No matter what I do - the Text Box isn’t showing up when I click the button. I’m at a complete loss. Can someone please help me? Is this a coding issue or a design issue or a bit of both?

1056×492 236 KB

Any assistance is greatly appreciated.

Jackie

2

It’s a little confusing, as your code contains a button onClick event, not plus sign event. I made a simple page with a strip, button and plus and minus text boxes, all with your ids and a couple of console.logs. Clicking the stepOneCollapseButton button works ok. Maybe a little more explanation would help…

3

Hi Colin - I really appreciate this explanation. Let me try to implement your recommended change and see if it works. Thank you!! I will circle back tomorrow.

4

$w . onReady ( function () {
$w ( ‘#newYorkCollapseButton’ ). onClick (() => {
toggleBox ( $w ( ‘#newYorkCollapsibleBox’ ), $w ( ‘#newYorkPlusSign’ ), $w ( ‘#newYorkMinusSign’ ));
});

$w ( '#newYorkMinusSign' ). onClick (() => { 
    toggleBox ( $w ( '#newYorkCollapsibleBox' ),  $w ( '#newYorkPlusSign' ),  $w ( '#newYorkMinusSign' )); 
}); 

$w ( '#newYorkPlusSign' ). onClick (() => { 
    toggleBox ( $w ( '#newYorkCollapsibleBox' ),  $w ( '#newYorkPlusSign' ),  $w ( '#newYorkMinusSign' )); 
});

});

function toggleBox ( boxElement , plusSign , minusSign ) {
const isCollapsed = boxElement . collapsed ;
if ( isCollapsed ) {
plusSign . hide ();
minusSign . show ();
boxElement . expand ();
} else {
minusSign . hide ();
plusSign . show ();
boxElement . collapse ();
}
}

As in the code above, it is recommended to give click events to the plus and minus elements in addition to the “button element”.

5

Hi there! Thank you very much for your help. I really appreciate the feedback and will keep this in mind as I work through some of these bugs.