HTML / CSS / JS / JQ - Slider zum Elemente Ein-/Ausblenden

xCrimsonAxe · 24. Apr. 2016

Hallo meine lieben ich bin hier gerade am verzweifeln...
Ich versuche seit Stunden einen Slider in einer Seite einzubinden welcher beim umlegen Segmente auf der rechten Seite ein bzw ausblendet.

Hier einige Bilder und Codeschnipsel vorweg:

Derzeitiges Layout:

Wie es nach umlegen des Sliders aussehen sollte:

Und da der Code die zulässigen 20.000 Zeichen überschreitet:
HTML-Code: https://codeshare.io/26iBj
CSS-Code: https://codeshare.io/JV2nM

Ich habe bereits 2 Lösungsansätze versucht welche aber aus Gründe welche sich mir nicht erschließen beide gescheitert sind.

Lösungsansatz 1: JQuery

HTML:

[...]
<head>
   <meta charset="UTF-8">
   <title>Startseite - Halunkenbande</title>
   <link rel="stylesheet" href="css/style.css" type="text/css">
   <script type="text/javascript" src="jquery-1.12.3.min.js"></script>
   <script type="text/javascript">
      $(document).ready(function(){
         if ($('#slider_schatten').is(:checked)) {
            $('#object').show();
            } else {
            $('#object').hide();
         }
      });
   </script>
</head>
[...]

[...]
<td>Schatten-Pets</td>
<td>
   <div class="slider">	
      <input type="checkbox" id="slider_schatten" name="Schatten-Pets" />
      <label class="shadow" for="slider_schatten"></label>
   </div>
</td>
[...]

[...]
<li id="object" style="display:none">  
   <a href="#" class="figure"><img src="http://forum.jswelt.de/images/pets/monster800.jpg" alt=""></a>
   <span><a href="#">Schlorps</a></span>
</li>
[...]

Lösungsansatz 2: CSS (Folgt später da ich es im moment nicht rekonstruieren kann)

Woran kann es liegen das es nicht funktioniert?
Hoffe ihr könnt mir helfen...

Mit besten Grüßen

kkapsner · 28. Apr. 2016

xCrimsonAxe schrieb:
Woran kann es liegen das es nicht funktioniert?

Dein JS hat einen Syntaxfehler... aber dieser Ansatz scheint mir nicht sehr robust/wartungsfreundlich zu sein. Da IDs ja dokumentenweit eindeutig sein müssen, musst du jedesmal dein JS anpassen, wenn du da ein <li> hinzufügst. Ich würde das über CSS-Klassenänderung auf dem <ul> machen. Z.B. würdest du die Klasse "showShadow" entfernen/hinzufügen und im CSS hättest du dann

Code:

li.shadow {
	display: none;
}
.showShadow li.shadow {
	display: initial;
}

HTML / CSS / JS / JQ - Slider zum Elemente Ein-/Ausblenden

xCrimsonAxe

New member

kkapsner

Super Moderator