How to collapse a box when a boolean in a dataset isn't ticked

Ask the community
,
1

I’m trying to add a disclaimer box to my dynamic page but only some of the pages require it. I want it so that when I tick the Boolean in the dataset, the box on the page expands and shows the content.

The dataset is called expeditions
The box is called infobox
The boolean field is called disclaimer

Thanks in advance for the help.

2

Can you help @russian-dima ? You seem to be pretty good at this kinda stuff.

3

Ok, let’s go trough your SETUP first.

You have a DATABASE ? → YES, ID —> ???
You have connected a DATASET to your DATABASE → YES → “expeditions” .
Inside of your DATABASE you have a BOOLEAN-DATAFIELD with ID → “disclaimer” .
And you have a BOX on your page, with the ID → “infobox” .

I want it so that when I tick the Boolean in the dataset, the box on the page expands and shows the content.

Now the question is, if you also have used a REPEATER?
How do you expect your results to be shown?

Just one ITEM per each page?
Or do you want to have all DATABASE-RESULTS inside a LIST on just one page?

To collapse an element —> $w(‘yourElementIDhere’).collapse();
To expand an element —> $w(‘yourElementIDhere’).expand();
To hide an element —> $w(‘yourElementIDhere’).hide();
To show an element —> $w(‘yourElementIDhere’).show();

On your page your CODE will strt something like this…

$w.onReady(()=>{
	$w('#dataset1').onReady(()=>{
		//here you will have to generate your code.....
		//but first make sure how exactly you want to present your results (take a look onto the mentioned questions).
	});
});
4

It is just one item that need to be displayed for page… a simple collapsed box i want to be expanded.

5

@russian-dima

6

If you are talking about just ONE ITEM PER EACH PAGE → then you have surely generated a —> DYNAMIC-PAGE (DYNAMIC-DATASET) ???

If so…

$w.onReady(()=>{
  $w('#expeditions').onReady(()=>{
	 let currentItem=$w('#expeditions').getCurrentItem();
	  console.log("Current-Item: ", currentItem);
	  console.log(currentItem.disclaimer);
	
	  let disclaimerState = currentItem.disclaimer

	  if (disclaimerState) {
			$w('yourElementIDhere').show();
	  }
	  else {$w('yourElementIDhere').hide();}
  });
});

Always monitor the CONSOLE-RESULTS.

7

@russian-dima you’ve been an amazing help!