DIV Statusabhängig Ein- oder Ausblenden

[fireb]

Hallo,

ich habe eine Vorstellung beim Design meines TabletUI mit Flexbox, allerdings kämpfe ich derzeit mit deren Umsetzung und hoffe, dass Ihr mir weiterhelfen könnt.

Und zwar möchte ich gerne ein DIV nur dann anzeigen lassen, wenn sich ein Schalter bzw. eine Checkbox im Status "on" befindet. Der Status der Checkbox wird von einem Device über das "state" Reading abgefragt.

Genauer gesagt möchte ich, dass wenn ich zb. eine Lampe über eine Checkbox einschalte danach darunter der Regler für die Helligkeit sichtbar wird. Wird die Lampe wieder ausgeschaltet, soll dieser wieder verschwinden.

Bisher habe ich es nur über einen eigenen Button geschafft die entsprechenden Optionen ein- oder auszublenden.

Hier der Code meines Heizungsthermostats wo ich die "Button- Variante" anwende.

Code Auswählen Erweitern


<div class="cell">
<div onclick="if ($('#var_name_drop').is(':hidden')) { $('#var_name_drop').slideDown(250); $('#dropdownheat > i.fa').addClass('fa-rotate-180'); } else { $('#var_name_drop').slideUp(250); $('#dropdownheat > i.fa').removeClass('fa-rotate-180'); }" id="dropdownheat" class="large">
<div data-type="checkbox" data-device="var_device" class="small blue"></div>
</div>
</div>
</div>
<div id="var_name_drop" style="display: none;">
<div data-type="spinner" data-device="var_device_Climate" data-get="desired-temp" data-set="desired-temp" data-icon-left-color="blue" data-icon-right-color="red" data-step="0.5" data-min="10" data-max="30" data-unit="&deg;" class="valueonly">
</div>
<div class="inline-small-bold">Ventilposition:</div>
<div data-type="label" data-device="var_ventil_Clima" data-get="ValvePosition" data-unit="%" class="inline"></div>
</div>


Theoretisch müsste ja nur geprüft werden, ob sich die Checkbox bzw. der state des Geräts auf "on" befindet und dann entsprechend das versteckte DIV anzeigen.

Leider kenne ich mich nur mit den Grundfunktionen von HTML und CSS aus und hoffe daher, dass Ihr mir eventuell weiterhelfen könnt.

Liebe Grüße
fireb

[Ulm32b]

Und zwar möchte ich gerne ein DIV nur dann anzeigen lassen, wenn sich ein Schalter bzw. eine Checkbox im Status "on" befindet. Der Status der Checkbox wird von einem Device über das "state" Reading abgefragt.

Dafür ist data-hide vorgesehen. Falls data-hide beim Spinner nicht geht, kann man das Ganze (Spinner + label) auch mit einem classchanger-div einrahmen. Mit classchanger dann Verbergen ein- und ausschalten. Näheres siehe Wiki.

[fireb]

Dazu müsste ich aber data-hide bei allen Elementen setzten welche ein- oder ausgeblendet werden sollen, oder kann ich damit gleich ein ganzes DIV mit seinem Inhalt ansprechen?
Bei den Lampen funktioniert es, da es nur einen Regler betrifft. Allerdings möchte ich auch noch bei meinem Radio die Optionen darunter, welche in einem DIV sind, komplett ein- oder ausblenden.

[setstate]

Das könnte man mit dem  classchanger realisieren.
Aber auch Switch und Symbol können aber auch mit data-hide per data-hideparents einen übergeordneten Container ausblenden. Man gibt dem Container eine id (id="parent1") und übergibt die so: data-hideparents="#parent1"