Multistate Function?

Ask the community
,
1

Hi all,

Below is a screenshot of a desired effect I am after. I am familiar with the multi-state boxes, but not sure if this would be needed for this function? As you click the 2nd or 3rd, light opacity text, the text underneath simply changes. Nothing expands/collapses, simply switches

Can I do that with a multi–state box?

1484×492 43.4 KB

2

You can do it with a textbox without a multi state box (by assigning new text on click). You can also use a multistate box with different textboxes for each and switch the state on click.

3

How do I assign it to a new text box?

4

Actually, the state boxes probably sounds better, and more convenient! I did trial it before this post. However, if I have two separate state boxes (one for title, one for info), how do I connect them upon click

5

@harleyweber

$w.onReady(()=>{
    $w('#myButton').onClick(()=>{
        $w('#myTextfieldIDinBox1').text = "Changing-Text in box1"
        $w('#myTextfieldIDinBox2').text = "Changing-Text in box2"
        console.log("Text in BOX1 and BOX2 has been changed!")
    }) 
})
6

@russian-dima Hi, thanks for your response. I’ve actually been developing this further myself, and have been able to assign a multi-state box, to a slideshow - which is great, as I have been able to highlight the topic the user is on, upon click. However, when the user clicks on another topic, it does not revert the previous state, as it in fact continues to highlight both (please see attached). What do I need to write coding wise, to reverse the state of the previous text, so it goes back to black writing?

This is my current coding:

$w.onReady( function () {

$w( "#ReadMoreButton1" ).onClick(() => {

$w( “#ReadMoreStateBox1” ).changeState( “expandedState” );
$w( ‘#ReadMoreStateBox1’ ).changeState( “expandedState1” );
$w( ‘#slideshow1’ ).changeSlide( 0 );
});
$w( “#ReadMoreButton2” ).onClick(() => {
$w( “#ReadMoreStateBox2” ).changeState( “expandedState2” );
$w( ‘#ReadMoreStateBox2’ ).changeState( “expandedState2” );
$w( ‘#slideshow1’ ).changeSlide( 1 );
});
});

Hope this is clear enough

1724×422 32.9 KB

1714×376 41.2 KB

7

@harleyweber
First of all —> please use CODE-TAGS when you show some code.
like this…

CODE in CODE-TAG here

SECOND! What is exactly the problem ?
You have a MultiStateBox (MSB) where you can dublictae your states.

For example you have now this in state1…

Then you should have in STATE-2 the same, but this time “Logo-Design” should be RED and “Brand Creation / Transformation” should be BLACK.

That’s all, because when you switch the state from 1 to 2, you will see the effect, that “Brand Creation / Transformation” changes to BLACK and “Logo-Design” change it’s color to RED.

So what was the problem one more time? :grin:

$w.onReady(function () {    
   $w("#ReadMoreButton1").onClick(() => {Brand-Creation            
      $w('#ReadMoreStateBox1').changeState("expandedState1");        
   });    
   
   $w("#ReadMoreButton2").onClick(() => {//Logo-Design
      $w("#ReadMoreStateBox2").changeState("expandedState2");
   });

   $w("#ReadMoreButton3").onClick(() => {//Brand-Guidelines
      $w("#ReadMoreStateBox3").changeState("expandedState3");
   });
});

So my question is now —> Why do you put it into a SLIDE-SHOW ?