Toggle any Element Visibility not working

[Steven_Joiner]

Hi there, i’m new to Wappler ( Converting from DW ) and i’m currently familiarising myself with interface and features. I’m going through documentation and tutorials which seem clear enough apart from being slightly out of date with current version.
A current example is under the ‘How to Guides’ there’s a tutorial named ‘Toggle any Element Visibility’
I have tried to follow the instructions which seem clear enough. but can’t get it top work.

I’ve attached screenshots of what I have. Any help would be great. Thanks in advance!

[Teodor]

Hi Steven,

Your expression for set value looks wrong:

@Steven_Joiner

Can you copy and paste its code here so we can see what is generated?

[Steven_Joiner]

Here you go!

<section>
		<div class="container">
			<button id="btn1" class="btn" dmx-on:click="toggler.setValue(toggler.value+'== 0 ? 1: 0')">Button</button>
			<div class="row">
				<div class="col mt-5" dmx-show="toggler.value+'==1'">

					<h1 class="text-center">Heading Test</h1>
					<p class="text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nisl tincidunt eget nullam non nisi est sit amet. Eget egestas purus viverra
						accumsan in nisl nisi. Phasellus vestibulum lorem sed risus ultricies tristique. Pharetra et ultrices neque ornare aenean euismod. Consequat id porta nibh venenatis cras. Tellus molestie nunc non blandit massa enim nec. Nisl
						suscipit adipiscing bibendum est ultricies integer quis auctor elit. Elit ut aliquam purus sit amet luctus venenatis.s</p>
				</div>
			</div>
		</div>
	</section>

[Teodor]

@Steven_Joiner

dmx-on:click="toggler.setValue(toggler.value+'== 0 ? 1: 0')"

This should be:

dmx-on:click="toggler.setValue(toggler.value == 0 ? 1 : 0)"

so please just change it and it will work.

[Steven_Joiner]

OK thanks. Is this a bug in the interface or am I doing something wrong in the process?

[Teodor]

It’s that the tutorial uses the old expression builder UI, while v3 brings a new one.
So you have to switch to “code view” first, and then enter the == 0 ? 1 : 0 part:

[Steven_Joiner]

OK no problem… Thanks for your help!

[Teodor]

Toggling visibility is now easier using the toggle component:

Using the Toggle Component

Intro The тoggle component is a simple, but quite handy component. It can be used to toggle visibility, styling, classes of the elements on your pages. In this tutorial we will show you a couple of examples - toggling visibility and toggling a class. Toggle Component Overview As all the App Connect components, the toggle component should be added in the App Structure, before you can use it. Right click App: [Screenshot_1] Then select Data > Toggle: [Screenshot_2] The toggle component h…