XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   (X)HTML (http://xhtmlforum.de/forumdisplay.php?f=72)
-   -   Div in einen Li element einbauen (http://xhtmlforum.de/showthread.php?t=73062)

agalva 08.11.2016 13:01

Div in einen Li element einbauen
 
Liste der Anhänge anzeigen (Anzahl: 2)
Hallo,
ich arbeite gerade an einen Projekt und ich habe einen Problem und weiss nicht wie ich weiter machen soll, deshalb die Frage:

Ich habe einen div mit eine Liste und 6 Elemente in der Liste. alle Elemente sind horizontal eingeordnet.
ich würde gern wenn man auf einen Element der Liste klickt einen versteckten div "toggle" darunter von diesen Div. und so hat jeden Li Element seinen eigenen Div.

Ich habe das auch geschafft indem ich einfach alle divs nach dem ersten div eingebaut habe, aber für die mobile Ansicht kommt diese Lösung nicht im Frage...

ich würde jetzt wissen ob es einen Weg gibt die divs unten den jeweiligen li's einzubauen so dass die darunter liegende Divs an der Gleiche Stelle erscheinen und nicht verschoben.... ich habe zwei Bilder Hochgeladen die zeigen genau wo die Problematik liegt.

Sorry wegen mein Deutsch, bin immer noch am Lernen.

Gruss Alva

MrMurphy 08.11.2016 13:24

Hallo

Ich verstehe leider nur halbwegs was du möchtest.

Zunächst solltest du dich davon lösen Elemente vorzugeben. Das erschwert nur das Finden einer Lösung.

Du hast 6 nebeneinander liegende Elemente. Welchen Inhalt haben die? Am besten zwei, drei konkrete Beispiele.

Wenn die angeklickt werden soll unterhalb weiterer Inhalt angezeigt werden.

Was ist das für ein Inhalt? Bilder? Texte? Mehrere Beispiele bitte.

Dieser Inhalt soll mehr oder weniger auf der gleichen Fläche entstehen?

Mit den Informationen würde ich dir den Checkbox-Hack empfehlen.

Ansonsten bliebe wohl nur eine Lösung mit JavaScript. Mit all den Nachteilen, die JavaScript mit sich bringt. Stichworte: Akkordeon oder accordeon.

Gruss

MrMurphy

dazzle89 08.11.2016 13:26

Am besten wäre dein Code oder ein Link zur Seite oder zu einer Seite, die dein Problem veranschaulicht.

Jedes toggle-Script funktioniert nämlich anders, was bedeutet, dass mit unterschiedlichem HTML-Aufbau gearbeitet wird.

Um die divs aber immer genau unter dem zugehörigen <li> zu positionieren, wäre folgender Aufbau geeignet:

HTML-Code:

<ul>
  <li>Listenpunkt 1 <div>Montag</div></li>
  <li>Listenpunkt 2 <div>Dienstag</div></li>
  <li>Listenpunkt 2 <div>Mittwoch</div></li>
</ul>

Die divs sollten sich also möglichst innerhalb der Listenpunkte befinden. Ob dein Toggle-Script damit klar kommt, weiß ich nicht, eventuell kannst du einfach den Selector anpassen.

agalva 08.11.2016 13:43

Unten ist mein Html code,

Ich würde gern wissen ob das was ich versuche zu machen überhaupt machbar ist oder nicht...

gruss

HTML-Code:

<div class="row" id="clubAuswahl">
        <ul class="portfolio-list sort-destination" data-sort-id="portfolio">
          <li class="col-md-1-5 isotope-item brands" data-iddiv="clubOneDays">
            <div class="portfolio-item"> <span class="thumb-info"> <span class="thumb-info-wrapper"> <img src="img/projects/project.jpg" class="img-responsive" alt=""> </span> </span> </div>
            <div class="containerDays" id="clubOneDays" style="display:none">
              <hr>
              <div class="col-md-12">
                <div class="row">
                  <ul class="portfolio-list">
                    <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubOneDayOne">
                      <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Montag1</span> </span> </span> </span> </div>
                    </li>
                    <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubOneDayTwo">
                      <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project-2.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Dienstag1</span> </span> </span> </span> </div>
                    </li>
                    <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubOneDayThree">
                      <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project-2.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Mittwoch1</span> </span> </span> </span> </div>
                    </li>
                    <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubOneDayFour">
                      <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project-2.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Donnerstag1</span> </span> </span> </span> </div>
                    </li>
                    <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubOneDayFive">
                      <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project-2.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Freitag1</span> </span> </span> </span> </div>
                    </li>
                    <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubOneDaySix">
                      <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project-3.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Samstag1</span> </span> </span> </span> </div>
                    </li>
                    <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubOneDaySeven">
                      <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project-4.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Sonntag1</span> </span> </span> </span> </div>
                    </li>
                  </ul>
                </div>
              </div>
          </li>
          <li class="col-md-1-5 isotope-item medias" data-iddiv="clubTwoDays">
            <div class="portfolio-item"> <span class="thumb-info"> <span class="thumb-info-wrapper"> <img src="img/projects/project-1.jpg" class="img-responsive" alt=""> </span> </span> </div>
            <div class="containerDays" id="clubTwoDays" style="display:none">
        <hr>
        <div class="col-md-12">
          <div class="row">
            <ul class="portfolio-list">
              <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubTwoDayOne">
                <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Montag2</span> </span> </span> </span> </div>
              </li>
              <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubTwoDayTwo">
                <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project-2.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Dienstag2</span> </span> </span> </span> </div>
              </li>
              <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubTwoDayThree">
                <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project-2.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Mittwoch2</span> </span> </span> </span> </div>
              </li>
              <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubTwoDayFour">
                <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project-2.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Donnerstag2</span> </span> </span> </span> </div>
              </li>
              <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubTwoDayFive">
                <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project-2.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Freitag2</span> </span> </span> </span> </div>
              </li>
              <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubTwoDaySix">
                <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project-3.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Samstag2</span> </span> </span> </span> </div>
              </li>
              <li class="col-md-2 col-sm-6 col-xs-12" data-iddiv="ticketsClubTwoDaySeven">
                <div class="portfolio-item"> <span class="thumb-info thumb-info-lighten"> <span class="thumb-info-wrapper"> <img src="img/projects/project-4.jpg" class="img-responsive" alt=""> <span class="thumb-info-title"> <span class="thumb-info-inner">Sonntag2</span> </span> </span> </span> </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
        </li>
          <li class="col-md-1-5 isotope-item logos" data-iddiv="clubThreeDays">
            <div class="portfolio-item"> <span class="thumb-info"> <span class="thumb-info-wrapper"> <img src="img/projects/project-2.jpg" class="img-responsive" alt=""> </span> </span> </div>
          </li>
          <li class="col-md-1-5 isotope-item brands" data-iddiv="clubFourDays">
            <div class="portfolio-item"> <span class="thumb-info"> <span class="thumb-info-wrapper"> <img src="img/projects/project-3.jpg" class="img-responsive" alt=""> </span> </span> </div>
          </li>
          <li class="col-md-1-5 isotope-item logos" data-iddiv="clubFiveDays">
            <div class="portfolio-item"> <span class="thumb-info"> <span class="thumb-info-wrapper"> <img src="img/projects/project-4.jpg" class="img-responsive" alt=""> </span> </span> </div>
          </li>
          <li class="col-md-1-5 isotope-item logos" data-iddiv="clubSixDays">
            <div class="portfolio-item"> <span class="thumb-info"> <span class="thumb-info-wrapper"> <img src="img/projects/project-4.jpg" class="img-responsive" alt=""> </span> </span> </div>
          </li>
        </ul>
      </div>


cloned 08.11.2016 13:52

Wenn ich deinen Code auf zB jsfiddle.net einfüge dann kann ich nicht wirklich erkennen was du da vor hast.

agalva 08.11.2016 14:03

hi, hier das jsfiddle:

https://jsfiddle.net/6quxx7La/

MrMurphy 08.11.2016 14:23

Hallo

Im JSFiddle wird mir nur ein Punkt angezeigt. Mehr als Tagesnamen sind dem Quelltext auch nicht zu entnehmen. Außer dass du wahrscheinlich ein Framework verwendest.

Leider hast du meine Fragen noch nicht beantwortet. Das ist wohl zielführender als der Quelltext um dein Problem überhaupt zu erkennen.

Ich habe mal ein Beispiel erstellt, so wie ich dein Problem verstanden zu haben glaube:

Testbeispiel

Wobei zunächst versteckter Text grundsätzlich nicht besucherfreundlich ist.

Gruss

MrMurphy

agalva 08.11.2016 15:43

Hi, So eine Lösungsansatz sieht sehr sehr gut aus, aber wenn ich die seite aufs Mobile Ansicht resize, werden alle texten ganz unten angezeigt, ich würde sie gern unten von den jeweiligen "labels anzuzeigen".... ist das überhaupt möglich?


Danke und Gruss

MrMurphy 08.11.2016 16:29

Hallo

Ich schwimme immer noch bei dem Versuch dein Anliegen zu verstehen.

Ich habe meinen Testtext mal angepasst.

Gruss

MrMurphy

agalva 08.11.2016 17:12

Jaaaaa genau sowas suche ich, will aber anstatt text wiederum 7 andere kästchen anzeigen....


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:59 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2024, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2023