Changing color/opacity of MultiState box and expanding it on click

Hi,
I am trying to set up a multi-state box on my website.
I would like to be able to expand and collapse it on click, i also would like to have buttons “show less” to bring it back to a collapsed state.
In addition, i would like it to change colour on mouse in and out to make it more user friendly and look like an obvious clickable element on the page.
Browsing through the topics, i managed to add the buttons and set up expand/collapse on click.
However, it somehow malfunctions. When i run the code and test it in the preview - it works great. However, after i save/publish my website and then i go to the live version - my on click event doesnt trigger.

and regarding the colour - i added a container box and reduced its opacity to 0% to make sure i can still see my multistate box. I’d like to change opacity of it somehow on mouse hover.
Here is my code (i am not a coder lol) that i somehow put together. It is still with the background style thingy, i can’t seem to find out how to just change opacity… Color changing is also an option…whichever works.
Please help.

$w ( ‘#readGT’ ). onClick (( event ) => {
$w ( “#readGT” ). changeState ( “GTExpandedState” );
$w ( “#readGT” ). changeState ( “GTCollapsedState” );
});

$w . onReady ( function () {

$w . onReady ( **function**  () { 
    $w ( "#GTLessButton" ). onClick (() => { 
        $w ( "#readGT" ). changeState ( "GTCollapsedState" ); 
    }); 
    $w ( "#GTLessButton2" ). onClick (() => { 
        $w ( "#readGT" ). changeState ( "GTCollapsedState" ); 
    }); 
}); 

});

export function GTbox_mouseIn ( event ) {
$w ( “#GTbox” ). style . backgroundColor = “rgba:(237, 231, 225, 1)” ;

}

export function GTbox_mouseOut ( event ) {
$w ( “#GTbox” ). style . backgroundColor = “rgba:(230,224,211,1)” ;
}

Try this one…

$w.onReady(()=>{console.log("Page is ready now...");
  //-------------------------------------------------------
  $w('#readGT').onClick((event) => {
    //here you are changing the STATE of your STATE-BOX 2x!!!!! (Just with one click!)
    $w("#readGT").changeState("GTExpandedState");   // <--- this one will be replaced by the second command (state-change)
    $w("#readGT").changeState("GTCollapsedState");  // <--- only this change will be visible (it will overwrite first action)
  });
  //-------------------------------------------------------
  $w("#GTLessButton").onClick(()=>    {$w("#readGT").changeState("GTCollapsedState");});  
  $w("#GTLessButton2").onClick(()=>   {$w("#readGT").changeState("GTCollapsedState");});  
  //-------------------------------------------------------
  $w("#GTbox").onMouseIn((event)=>  {$w("#GTbox").style.backgroundColor = "rgba=(237,231,225,1)";});
  $w("#GTbox").onMouseOut((event)=> {$w("#GTbox").style.backgroundColor = "rgba=(230,224,211,1)";});
});

Hello dear friends,

I shuffled things around a bit and wrote the following:

$w . onReady ( function () {

$w ( ‘#readGT’ ). onClick (( event ) => {
$w ( “#readGT” ). changeState ( “GTExpandedState” );
$w ( “#readGT” ). changeState ( “GTCollapsedState” );
});

$w ( "#GTbox" ). onMouseIn ( ( event ) => { 
  $w ( "#GTbox" ). style . backgroundColor  =  "#D3D3D3" ; 
  } ); 
$w ( "#titleGT" ). onMouseIn ( ( event ) => { 
  $w ( "#GTbox" ). style . backgroundColor  =  "#D3D3D3" ; 
  } ); 

$w ( "#GTbox" ). onMouseOut ( ( event ) => { 
  $w ( "#GTbox" ). style . backgroundColor  =  "#E6E0D3" ; 
  } ); 
$w ( "#titleGT" ). onMouseOut ( ( event ) => { 
  $w ( "#GTbox" ). style . backgroundColor  =  "##E6E0D3" ; 
  } ); 

$w . onReady ( **function**  () { 
    $w ( "#GTLessButton" ). onClick (() => { 
        $w ( "#readGT" ). changeState ( "GTCollapsedState" ); 
    }); 
    $w ( "#GTLessButton2" ). onClick (() => { 
        $w ( "#readGT" ). changeState ( "GTCollapsedState" ); 
    }); 
}); 

});

It seems to sort the issue. It actually works on the page and while testing it in editor.
I never really coded anything kkk

Is this a correct way?

Thank you mate.
I think i figured it out before i saw your response.
Not sure if this is the correct way to use code, but it does work.

Now, i got another problem haha - somehow the lower border of my multistate box (or is it a container box border, no idea) disappears when i expand the multistate box. What am i doing wrong?

Ok, i tried to correct your code and eleminated doubled (onReady-commands) and you do it again :rofl:

NEVER USE MORE THAN JUST 1x —> $w.onReady() !!!

You use this just once in your whole code…

$w.onReady(()=>{console.log("Page is ready now..."); 
	...your code here
	...your code here
	...your code here
	...your code here
	...your code here
	...your code here
	...your code here
	...your code here
});

Another question… why this ???

$w('#readGT').onClick((event)=>{
	$w("#readGT").changeState("GTExpandedState");
	$w("#readGT").changeState("GTCollapsedState");
});

The first state will be overwritten, because it is the last called one in your onClick-function, right?

It will always be COLLAPSED-STATE.
So you can delete EXPANDED-STATE, right?

Thank you mate, you are a real ninja :slight_smile:
I understood, i will remove the other onReady thingy.

Regarding the second question:
The multistate box is originally in a collapsed state, i want it to expand when it is clicked and then be able to collapse it when it is clicked again, plus there are two buttons that do the collapsing as well.

Here is my corrected code:

$w . onReady ( function () {

$w ( ‘#readGT’ ). onClick (( event ) => {
$w ( “#readGT” ). changeState ( “GTExpandedState” ); //expanding on click
$w ( “#readGT” ). changeState ( “GTCollapsedState” ); //collapsing on click
});

$w ( "#GTbox" ). onMouseIn ( ( event ) => { 
  $w ( "#GTbox" ). style . backgroundColor  =  "#D3D3D3" ;  //changing colour on hover 
  } ); 
$w ( "#titleGT" ). onMouseIn ( ( event ) => { 
  $w ( "#GTbox" ). style . backgroundColor  =  "#D3D3D3" ;  //changing colour on hover over text 
  } ); 

$w ( "#GTbox" ). onMouseOut ( ( event ) => { 
  $w ( "#GTbox" ). style . backgroundColor  =  "#E6E0D3" ;  //setting colour back  
  } ); 
$w ( "#titleGT" ). onMouseOut ( ( event ) => { 
  $w ( "#GTbox" ). style . backgroundColor  =  "##E6E0D3" ;  //setting colour back 
  } ); 

$w ( "#GTLessButton" ). onClick (() => { 
  $w ( "#readGT" ). changeState ( "GTCollapsedState" );  //button at the top of text for collapsing 
    }); 
$w ( "#GTLessButton2" ). onClick (() => { 
  $w ( "#readGT" ). changeState ( "GTCollapsedState" );  //button at the bottom of the text for collapsing 
    }); 
});

Good, but still not perfect.
Look onto the tips i already wrote on the very bottom of this post.

sorry, i do not understand what exactly you’re referring to?

$w.onReady(function () {

   $w('#readGT').onClick((event) => {
      $w("#readGT").changeState("GTExpandedState");
      $w("#readGT").changeState("GTCollapsedState");
      });

    $w("#GTbox").onMouseIn( (event) => {
      $w("#GTbox").style.backgroundColor = "#D3D3D3";
      } );
    $w("#titleGT").onMouseIn( (event) => {
      $w("#GTbox").style.backgroundColor = "#D3D3D3";
      } );

    $w("#GTbox").onMouseOut( (event) => {
      $w("#GTbox").style.backgroundColor = "#E6E0D3";
      } );
    $w("#titleGT").onMouseOut( (event) => {
      $w("#GTbox").style.backgroundColor = "##E6E0D3";
      } );

    $w.onReady(function () {
        $w("#GTLessButton").onClick(() => {
            $w("#readGT").changeState("GTCollapsedState");
        });
        $w("#GTLessButton2").onClick(() => {
            $w("#readGT").changeState("GTCollapsedState");
        });
    });
});

Thank you mate.
I removed second onready thingy.

However, when i remove one of the changestate’s - then multibox doesn’t work the way i want it: which is expanding when i click on it and then collapsing when i again click on it. - does this explain why i put those lines twice? Is there a better way to make it work?

Here is the current code:

$w . onReady ( function () {
//general terms multi-state box
$w ( ‘#readGT’ ). onClick (( event ) => {
$w ( “#readGT” ). changeState ( “GTExpandedState” ); //expanding on click
$w ( “#readGT” ). changeState ( “GTCollapsedState” ); //collapsing on click
});

$w ( "#GTbox" ). onMouseIn ( ( event ) => { 
  $w ( "#GTbox" ). style . backgroundColor  =  "#D3D3D3" ;  //changing colour on hover 
  } ); 
$w ( "#titleGT" ). onMouseIn ( ( event ) => { 
  $w ( "#GTbox" ). style . backgroundColor  =  "#D3D3D3" ;  //changing colour on hover over text 
  } ); 

$w ( "#GTbox" ). onMouseOut ( ( event ) => { 
  $w ( "#GTbox" ). style . backgroundColor  =  "#E6E0D3" ;  //setting colour back  
  } ); 
$w ( "#titleGT" ). onMouseOut ( ( event ) => { 
  $w ( "#GTbox" ). style . backgroundColor  =  "##E6E0D3" ;  //setting colour back 
  } ); 

$w ( "#GTLessButton" ). onClick (() => { 
  $w ( "#readGT" ). changeState ( "GTCollapsedState" );  //button at the top of text for collapsing 
    }); 
$w ( "#GTLessButton2" ). onClick (() => { 
  $w ( "#readGT" ). changeState ( "GTCollapsedState" );  //button at the bottom of the text for collapsing 
    }); 

//data protection multi-state box

$w ( ‘#readDP’ ). onClick (( event ) => {
$w ( “#readDP” ). changeState ( “DPExpandedState” ); //expanding on click
$w ( “#readDP” ). changeState ( “DPCollapsedState” ); //collapsing on click
});

$w ( "#DPbox" ). onMouseIn ( ( event ) => { 
  $w ( "#DPbox" ). style . backgroundColor  =  "#D3D3D3" ;  //changing colour on hover 
  } ); 
$w ( "#titleDP" ). onMouseIn ( ( event ) => { 
  $w ( "#DPbox" ). style . backgroundColor  =  "#D3D3D3" ;  //changing colour on hover over text 
  } ); 

$w ( "#DPbox" ). onMouseOut ( ( event ) => { 
  $w ( "#DPbox" ). style . backgroundColor  =  "#E6E0D3" ;  //setting colour back  
  } ); 
$w ( "#titleDP" ). onMouseOut ( ( event ) => { 
  $w ( "#DPbox" ). style . backgroundColor  =  "##E6E0D3" ;  //setting colour back 
  } ); 

$w ( "#DPLessButton" ). onClick (() => { 
  $w ( "#readDP" ). changeState ( "DPCollapsedState" );  //button at the top of text for collapsing 
    }); 
$w ( "#DPLessButton2" ). onClick (() => { 
  $w ( "#readDP" ). changeState ( "DPCollapsedState" );  //button at the bottom of the text for collapsing 
    }); 
}); 

Thank you Ninja.

Hi mate,
I need one last help with this code :slight_smile:

After i expand the multistate boxes, read the content and then click either a button or click the multistate box to collapse it back - the page stays at the same spot and doesn’t scroll/fold back up. Is there a way i make the page scroll back up?

Thanks a lot ninja-master!

Read this post (running parallel)…

Thank you Velo Ninja… but I am totally lost with that post.

I understood that scrollTo is what i need to use. How do i incorporate it into my code? Do i add a line for each multistate box i have on my page?

When i add code for the first multistate box - it seems to work.
When i add it to the second multistate box - the whole code just stops working…
Plus the scrolling is not to the top of the page, but rather to a text on my page’s header…

$w . onReady ( function () {
//general terms multi-state box
$w ( ‘#readGT’ ). onClick (( event ) => {
$w ( “#readGT” ). changeState ( “GTExpandedState” ); //expanding on click
$w ( “#readGT” ). changeState ( “GTCollapsedState” ); //collapsing on click
$w ( ‘#readGT’ ). onChange (() => {
$w ( ‘#text10’ ). scrollTo (); //what should i put instead of text10 so that it scroll to the top?
})
});

$w ( "#GTbox" ). onMouseIn ( ( event ) => { 
  $w ( "#GTbox" ). style . backgroundColor  =  "#D3D3D3" ;  //changing colour on hover 
  } ); 
$w ( "#titleGT" ). onMouseIn ( ( event ) => { 
  $w ( "#GTbox" ). style . backgroundColor  =  "#D3D3D3" ;  //changing colour on hover over text 
  } ); 

$w ( "#GTbox" ). onMouseOut ( ( event ) => { 
  $w ( "#GTbox" ). style . backgroundColor  =  "#E6E0D3" ;  //setting colour back  
  } ); 
$w ( "#titleGT" ). onMouseOut ( ( event ) => { 
  $w ( "#GTbox" ). style . backgroundColor  =  "##E6E0D3" ;  //setting colour back 
  } ); 

$w ( "#GTLessButton" ). onClick (() => { 
  $w ( "#readGT" ). changeState ( "GTCollapsedState" );  //button at the top of text for collapsing 
    }); 
$w ( "#GTLessButton2" ). onClick (() => { 
  $w ( "#readGT" ). changeState ( "GTCollapsedState" );  //button at the bottom of the text for collapsing 
    }); 

//data protection multi-state box

$w ( ‘#readDP’ ). onClick (( event ) => {
$w ( “#readDP” ). changeState ( “DPExpandedState” ); //expanding on click
$w ( “#readDP” ). changeState ( “DPCollapsedState” ); //collapsing on click
//$w(‘#readDP’).onChange(() => {
//$w(‘#text10’).scrollTo(); this one doesn’t work…
});

$w ( "#DPbox" ). onMouseIn ( ( event ) => { 
  $w ( "#DPbox" ). style . backgroundColor  =  "#D3D3D3" ;  //changing colour on hover 
  } ); 
$w ( "#titleDP" ). onMouseIn ( ( event ) => { 
  $w ( "#DPbox" ). style . backgroundColor  =  "#D3D3D3" ;  //changing colour on hover over text 
  } ); 

$w ( "#DPbox" ). onMouseOut ( ( event ) => { 
  $w ( "#DPbox" ). style . backgroundColor  =  "#E6E0D3" ;  //setting colour back  
  } ); 
$w ( "#titleDP" ). onMouseOut ( ( event ) => { 
  $w ( "#DPbox" ). style . backgroundColor  =  "##E6E0D3" ;  //setting colour back 
  } ); 

$w ( "#DPLessButton" ). onClick (() => { 
  $w ( "#readDP" ). changeState ( "DPCollapsedState" );  //button at the top of text for collapsing 
    }); 
$w ( "#DPLessButton2" ). onClick (() => { 
  $w ( "#readDP" ). changeState ( "DPCollapsedState" );  //button at the bottom of the text for collapsing 
    }); 
});

$w ( ‘#text10’ ). scrollTo (); //what should i put instead of text10 so that it scroll to the top?

It depends always where you have placed your element on your page and which elements you are reffering to.

Where is located “#text10” ?

Where did you place “#text10” ???

Your page surely is divided into 3-parts (HEADER/BODY/FOOTER).
Your multistate-box surely will be located in the BODY-PART of your page.

Now it is the question to which element you want to scroll to after trigger-action has been done.

You can put a line-element directly over your multistate-box and reffering the scroll-function to it, normaly this should always scrol to the top of your multistate-box.

Hi,

Thank you mate.

I placed these lines of code at the bottom of my page code and it worked. I also changed “#text10” to “#header1” so it actually just scrolls all the way up.

Here is what i ended up with. It works, but i am not sure if it is a correct way to do that?

$w . onReady ( function () {
//general terms multi-state box
$w ( ‘#readGT’ ). onClick (( event ) => {
$w ( “#readGT” ). changeState ( “GTExpandedState” ); //expanding on click
$w ( “#readGT” ). changeState ( “GTCollapsedState” ); //collapsing on click
});

$w ( "#GTbox" ). onMouseIn ( ( event ) => { 
  $w ( "#GTbox" ). style . backgroundColor  =  "#D3D3D3" ;  //changing colour on hover 
  } ); 
$w ( "#titleGT" ). onMouseIn ( ( event ) => { 
  $w ( "#GTbox" ). style . backgroundColor  =  "#D3D3D3" ;  //changing colour on hover over text 
  } ); 

$w ( "#GTbox" ). onMouseOut ( ( event ) => { 
  $w ( "#GTbox" ). style . backgroundColor  =  "#E6E0D3" ;  //setting colour back  
  } ); 
$w ( "#titleGT" ). onMouseOut ( ( event ) => { 
  $w ( "#GTbox" ). style . backgroundColor  =  "##E6E0D3" ;  //setting colour back 
  } ); 

$w ( "#GTLessButton" ). onClick (() => { 
  $w ( "#readGT" ). changeState ( "GTCollapsedState" );  //button at the top of text for collapsing 
    }); 
$w ( "#GTLessButton2" ). onClick (() => { 
  $w ( "#readGT" ). changeState ( "GTCollapsedState" );  //button at the bottom of the text for collapsing 
    }); 

//data protection multi-state box

$w ( ‘#readDP’ ). onClick (( event ) => {
$w ( “#readDP” ). changeState ( “DPExpandedState” ); //expanding on click
$w ( “#readDP” ). changeState ( “DPCollapsedState” ); //collapsing on click
//$w(‘#readDP’).onChange(() => {
//$w(‘#text10’).scrollTo();
});

$w ( "#DPbox" ). onMouseIn ( ( event ) => { 
  $w ( "#DPbox" ). style . backgroundColor  =  "#D3D3D3" ;  //changing colour on hover 
  } ); 
$w ( "#titleDP" ). onMouseIn ( ( event ) => { 
  $w ( "#DPbox" ). style . backgroundColor  =  "#D3D3D3" ;  //changing colour on hover over text 
  } ); 

$w ( "#DPbox" ). onMouseOut ( ( event ) => { 
  $w ( "#DPbox" ). style . backgroundColor  =  "#E6E0D3" ;  //setting colour back  
  } ); 
$w ( "#titleDP" ). onMouseOut ( ( event ) => { 
  $w ( "#DPbox" ). style . backgroundColor  =  "##E6E0D3" ;  //setting colour back 
  } ); 

$w ( "#DPLessButton" ). onClick (() => { 
  $w ( "#readDP" ). changeState ( "DPCollapsedState" );  //button at the top of text for collapsing 
    }); 
$w ( "#DPLessButton2" ). onClick (() => { 
  $w ( "#readDP" ). changeState ( "DPCollapsedState" );  //button at the bottom of the text for collapsing 
    }); 

$w ( ‘#readGT’ ). onChange (() => {
$w ( ‘#header1’ ). scrollTo (); //scroll back for the multi-state box readGT
})
$w ( ‘#readDP’ ). onChange (() => {
$w ( ‘#header1’ ). scrollTo (); //scroll back for the multi-state box readDP
})

});

The most important thing is, that it works for you.
Maybe in few months you will already be able to generate a more efficiant and acurate code, but at moment only the proper functionality should be important for you.

2 Likes

thank you mate for your advice.

1 Like