• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Frage SlideToggle UP/DOWN + Flexbox

majesticc89

majesticc89

Mitglied
Servus Leute,
erstmal der Code:

HTML:
Code: 
<div id="container">
  <div class="box">
    <p class="richtung"> Überschrift 1</p>
          <h3 class="name"> TEST1 </h3>
      <div class="panel">
              <div class="beschreibung">
                TEXT1
              </div>
              <div class="linkattribut">
              Link: <a href="#" target="_blank"> testlink1 </a>
              </div>
            </div>
          <p class="space"> &nbsp; </p>
          <h3 class="name"> TEST2 </h3>
      <div class="panel">
              <div class="beschreibung">
                TEXT2
              </div>
              <div class="linkattribut">
              Link: <a href="#" target="_blank"> testlink2 </a>
              </div>
            </div>
          <p class="space"> &nbsp; </p>
          <h3 class="name"> TEST3 </h3>
      <div class="panel">
              <div class="beschreibung">
                TEXT3
              </div>
              <div class="linkattribut">
              Link: <a href="#" target="_blank"> testlink3 </a>
              </div>
            </div>
          <p class="space"> &nbsp; </p>
          <h3 class="name"> TEST4 </h3>
      <div class="panel">
              <div class="beschreibung">
                TEXT4
              </div>
              <div class="linkattribut">
              Link: <a href="#" target="_blank"> testlink4 </a>
              </div>
            </div>
          <p class="space"> &nbsp; </p>
  </div>
  <div class="box">
    <p class="richtung"> Überschrift 2</p>
          <h3 class="name"> TEST5 </h3>
      <div class="panel">
              <div class="beschreibung">
                TEXT5
              </div>
              <div class="linkattribut">
              Link: <a href="#" target="_blank"> testlink5 </a>
              </div>
            </div>
          <p class="space"> &nbsp; </p>
          <h3 class="name"> TEST6 </h3>
      <div class="panel">
              <div class="beschreibung">
                TEXT6
              </div>
              <div class="linkattribut">
              Link: <a href="#" target="_blank"> testlink2 </a>
              </div>
            </div>
          <p class="space"> &nbsp; </p>
          <h3 class="name"> TEST7 </h3>
      <div class="panel">
              <div class="beschreibung">
                TEXT7
              </div>
              <div class="linkattribut">
              Link: <a href="#" target="_blank"> testlink7 </a>
              </div>
            </div>
          <p class="space"> &nbsp; </p>
          <h3 class="name"> TEST8 </h3>
      <div class="panel">
              <div class="beschreibung">
                TEXT8
              </div>
              <div class="linkattribut">
              Link: <a href="#" target="_blank"> testlink8 </a>
              </div>
            </div>
          <p class="space"> &nbsp; </p>
  </div>
  <div class="box">
    <p class="richtung"> Überschrift 3</p>
          <h3 class="name"> TEST9 </h3>
      <div class="panel">
              <div class="beschreibung">
                TEXT9
              </div>
              <div class="linkattribut">
              Link: <a href="#" target="_blank"> testlink9 </a>
              </div>
            </div>
          <p class="space"> &nbsp; </p>
          <h3 class="name"> TEST10 </h3>
      <div class="panel">
              <div class="beschreibung">
                TEXT10
              </div>
              <div class="linkattribut">
              Link: <a href="#" target="_blank"> testlink10 </a>
              </div>
            </div>
          <p class="space"> &nbsp; </p>
          <h3 class="name"> TEST11 </h3>
      <div class="panel">
              <div class="beschreibung">
                TEXT11
              </div>
              <div class="linkattribut">
              Link: <a href="#" target="_blank"> testlink11 </a>
              </div>
            </div>
          <p class="space"> &nbsp; </p>
          <h3 class="name"> TEST12 </h3>
      <div class="panel">
              <div class="beschreibung">
                TEXT12
              </div>
              <div class="linkattribut">
              Link: <a href="#" target="_blank"> testlink12 </a>
              </div>
            </div>
          <p class="space"> &nbsp; </p>
  </div>
</div>

CSS:
Code: 
#container {
  display: flex;
  justify-content: space-around;
}

.box {
  border: 0.1vw solid black;
  border-radius: 1vw;
  width: 25vw;
  height: 40vw;
}

.richtung {
  padding: 0.5vw 0 0.5vw 0;  
  font-size: 2vw;
  font-weight: bold;
  text-align: center;
}

.panel {
  display: none;
  margin: 0 auto 0 auto;
  width: 20vw;
  border-right: 0.1vw solid black;
  border-left: 0.1vw solid black;
  border-bottom: 0.1vw solid black;
  box-sizing: border-box;
}

.space {
    height: 0.4vw;
}

.name {
    font-size: 1vw;
    margin:0 auto 0 auto;
    padding-top: 0.1vw;
    width: 20vw;
    height: 1.6vw;
    text-align: center;
    cursor: pointer;
    background-color: YellowGreen;
    border: 0.1vw solid black;
    box-sizing: border-box;
}

.name:hover {
    background-color: black;
    color: YellowGreen;;
}

.beschreibung {
  padding-top: 0.3vw;
  width: 20vw;
  font-size: 1vw;
  text-align: center;
}

.linkattribut {
  padding: 0.8vw 1vw 0.8vw 1vw;
  width: 20vw;
  font-size: 1vw;
  font-weight: bold;
  box-sizing: border-box;
}


  .linkattribut a{
  padding-left: 3vw;
  list-style: none;
  text-decoration: none;
  color: #2cb5e8;
}

.linkattribut a:hover {
  color: red;
  letter-spacing: 0.1vw;
}

JavaScript:
Code: 
$(function () {
      $('.name').click(function () {
        $(this).next('div').slideToggle();
        $(this).parent().siblings().children().next().slideUp();
        return false;
        });
      });

JSFIDDLE: DEMO

Also ich habe 3 Boxen die horizontal neben einander liegen (dank Flexbox).
Es werden in jeder Box nur die jeweiligen "class=name" angezeigt. Clickt man drauf, fährt es aus!
Funktioniert auch soweit (mit XAMPP, seltsamer nicht bei JSFIDDLE).

Problem 1:
Es ist geplant, dass immer nur ein "panel" offen ist.
Wenn eins offen ist und ich ein Anderes anklicke, sollte sich das Offene schließen.

Problem 2:
Habe ein Problem mit den Boxen. Öffne ich ein Panel aus bspw. Box 2.... verschwinden alle "names" aus Box 1 und Box 3.
Wieso?


Weiß einer Rat?
 
Werbung:
Es funktioniert bei JsFiddle nicht, da du mit Jquery gearbeitet hast und es dann auch als external resource einbinden musst.

Problem 1:
Das kannst du fixen, in dem du vor
Code: 
$(this).next('div').slideToggle();
noch
Code: 
$(".name + div").slideUp();
einfügst.
Das bewirkt, dass ALLE panels einmal hochgeslided werden und erst dann wird das geklickte Panel geöffnet.


Problem 2:
Entferne diese Zeile:
Code: 
$(this).parent().siblings().children().next().slideUp();
denn du lässt alle Panels nach oben sliden.

Resultierender Code:
Code: 
$(function () {
  $('.name').click(function () {
     $(".name + div").slideUp();
     $(this).next('div').slideToggle();
  });
});
 
Fast!!!!
Nun lässt sich das offene DIV nicht mehr schließen (wenn man drauf clickt). Es öffnet sich quasi immer neu.

Aber sonst alle Probleme behoben.
@Aaron3219: Danke, hammer!
 
Werbung:
Code: 
$(function () {
  $('.name').click(function () {
     $(".name + div").not($(this).next('div')).slideUp(); // Diese Zeile ändert sich
     $(this).next('div').slideToggle();
  });
});

mit dem not() Zusatz, sagst, dass alle upsliden sollen, außer das div, dass bereits offen ist, also das folgende div vom this aus gesehen:
Code: 
not($(this).next('div'))
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben