<DIV>Elemente via Switch ein/aus-blenden

[harald654]

Hallo,

ich hab mich seid ein paar Tagen mehr oder wenige Errfolgreich in FHEM eingearbeitet
Bei einem vorhaben komm ich nun leider nicht mehr weiter und wollt hier im Forum um Rat fragen.
Konkret geht es darum einen ganzen <div> Bereich durch drücken eines Switch ein/aus zu blenden.

Den <div>Bereich welchen ich aus/ein-belnden möchte:

Code Auswählen Erweitern

<div>
<div class="container bg-gray gray round" data-device="SB_PLAYER_978368438b78" data-get="currentPlaylistName" data-substitution="s/-//g">
<div>
<div class="cell inline lightgray"> <b>W<br>z<br>m<br>r</b> </div>
<div class="cell inline">
<div class="narrow" data-type="spinner" data-icon-left="fa-volume-down" data-icon-right="fa-volume-up" data-device="SB_PLAYER_978368438b78" data-get="volume" data-set="volume" data-background-color="none" ></div>
<div class="class inline small narrow">
<div data-type="switch" data-device="SB_PLAYER_978368438b78" data-get="synced" data-get-on="!none" data-get-off="none" data-icon="fa-link"
data-background-icon="-" data-off-color="rgba(208,208,208,.8)" data-on-color="orange" ></div>
<div data-type="switch" data-device="SB_PLAYER_978368438b78" data-get="playStatus" data-get-on='["playing","paused","stopped"]' data-set-on="play" data-set-off="pause 1" data-icons='["fa-pause","fa-play","fa-play"]'
data-background-icon="-" data-off-color="rgba(208,208,208,.8)" data-on-color="orange" ></div>
<div data-type="push" data-device="SB_PLAYER_978368438b78" data-set="stop" data-icon="fa-stop" data-background-icon="-" data-off-color="rgba(208,208,208,.8)" ></div>
<div data-type="push" data-device="SB_PLAYER_978368438b78" data-set="next" data-icon="fa-step-forward" data-background-icon="-" data-off-color="rgba(208,208,208,.8)" ></div>
</div>
</div>
<div class="cell inline" data-type="image" data-device="SB_PLAYER_978368438b78" data-get="coverarturl" data-height="65x" data-width="65px"></div>
</div>
</div>
</div>
<div class="lightgray" data-type="label" data-device="SB_PLAYER_978368438b78" data-get="currentPlaylistName" ></DIV>

Bin leider Neuling in Sachen HTML und CCS, darum hab ich mal ein paar Tutorials zum ein/aus-blenden von Elementen durchgelesen.
Mit

Code Auswählen Erweitern

<div style="visibility: hidden;" id="example"> und

Code Auswählen Erweitern

   <div href="#" onclick="document.getElementById('example').style.visibility = 'visible'; return false;">
        Test
    </div>
hab ich das Vorhaben halbwegs zum laufen bekommen, nur wie kann ich anstelle des Textes "Test" einen Switch ala

Code Auswählen Erweitern

<div data-type="switch" data-device="SB_PLAYER_978368438b78" data-get="state" data-get-on="on" data-get-off="off" data-set-on="on" data-set-off="off" data-icon="fa-power-off" ></div> zum ein/aus-blenden verwenden?

Gibt es eigentlich auch die Möglichkeit das der Platz des ausgeblendeten <div>Elements von anderen Elementen benutzt werden kann (sprich das im ausgeblendeten Zustand die Elemente unterhalb des <div>Bereichs auf dessen Platz hochkrücken und beim Einblenden dann wieder nach Unten wandern)



Gruß,
H.

[blasterx]

Schau dir mal classchanger an damit geht es.

Gesendet von meinem SM-G935F mit Tapatalk

[harald654]

Manchmal ist es einfacher als man denkt,
Danke