Can't get toggler to toggle


#1

I have a dynamic list in a repeat region showing questions. By clicking the button (later image) I want to toggle the answer. I followed instructions form https://community.wappler.io/t/toggle-any-element-visibility/3882. But no joy.


#2

Well how do you target the proper answer when it is in a repeat region? Have you applied dynamic IDs to your answers?


#3

Tried to do that, but apparently in the wrong spot:


#4

This code won’t work like that in your case. It’s suitable for single element toggle, not like in your case in a repeat region.


#5

I noticed that it won’t work in my case. How can I get it to work in my case? Sorry for being a nuisance


#6

Well, just change the logic to use a dynamic value instead of static.

Button:
<button class="btn" dmx-on:click="toggler.setValue($index)">Button</button>

Answer div:
<div dmx-show="toggler.value == $index" dmx-html="antwoord"></div>

And leave the initial value of the variable empty, instead of ‘0’

Jut for your info - the $index expression in a repeater returns the index of the element, starting from 0.


#7

That worked. I noticed I can open, but can not close. Is that correct?


#8

If you want to toggle visibility change the onclick event value to:

dmx-on:click="toggler.setValue((toggler.value == -1 || toggler.value != $index) ? $index : -1)"

and set the initial value of the toggler variable to: -1


#9

Last question on this subject (I hope). Is it possible to have multiple different togglers from say four different query’s on one page? Now it opens as for index same lines for all four at the same time.
http://www.testworks.nl/vragen.php


#10

The way you currently built your page you can use 4 different variables for each of your repeat regions.


#11

Ok, I just added nn+$index where nn represents 100, 200, 300 and 400 for each repeat region. It seems to work.


#12

That’s also a nice solution :slight_smile:


#13

Working like a charm now. Have a good weekend!


#14

Did it again. Can’t get single toggler to toggle this time.
<div class="col text-center"><button class="btn btn-info" dmx-on:click="toggler.setValue(== 0 ? 1: 0)">Meer afbeeldingen</button></div> </div> <div class="row" id="fotoshow" name="fotoshow" dmx-show="toggler.value==1">
Second closing DIV in button div is not an error. Just related to row


#15

That is wrong expression. It must be:

... toggler.setValue(toggler.value == 0 ? 1: 0)" ...


#16

That is wrong expression. It must be:

... toggler.setValue(toggler.value == 0 ? 1: 0)" ...


#17

Just noticed the same error on my side. Stupid this side. Thanks