zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > (X)HTML
Seite neu laden Div in einen Li element einbauen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 08.11.2016, 12:01
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.11.2016
Beiträge: 9
agalva befindet sich auf einem aufstrebenden Ast
Standard Div in einen Li element einbauen

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
Angehängte Grafiken
Dateityp: png Bildschirmfoto 2016-11-08 um 10.53.29.png (81,3 KB, 8x aufgerufen)
Dateityp: png Bildschirmfoto 2016-11-08 um 10.54.11.png (89,1 KB, 7x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 08.11.2016, 12:24
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.01.2010
Beiträge: 973
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 08.11.2016, 12:26
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 02.01.2012
Beiträge: 479
dazzle89 wird schon bald berühmt werden
Standard

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.
Mit Zitat antworten
  #4 (permalink)  
Alt 08.11.2016, 12:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.11.2016
Beiträge: 9
agalva befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #5 (permalink)  
Alt 08.11.2016, 12:52
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 1.558
cloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Menschcloned ist ein sehr geschätzer Mensch
Standard

Wenn ich deinen Code auf zB jsfiddle.net einfüge dann kann ich nicht wirklich erkennen was du da vor hast.
Mit Zitat antworten
  #6 (permalink)  
Alt 08.11.2016, 13:03
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.11.2016
Beiträge: 9
agalva befindet sich auf einem aufstrebenden Ast
Standard

hi, hier das jsfiddle:

https://jsfiddle.net/6quxx7La/
Mit Zitat antworten
  #7 (permalink)  
Alt 08.11.2016, 13:23
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.01.2010
Beiträge: 973
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

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
Mit Zitat antworten
  #8 (permalink)  
Alt 08.11.2016, 14:43
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.11.2016
Beiträge: 9
agalva befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #9 (permalink)  
Alt 08.11.2016, 15:29
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.01.2010
Beiträge: 973
MrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer MenschMrMurphy ist ein sehr geschätzer Mensch
Standard

Hallo

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

Ich habe meinen Testtext mal angepasst.

Gruss

MrMurphy
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 08.11.2016, 16:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 08.11.2016
Beiträge: 9
agalva befindet sich auf einem aufstrebenden Ast
Standard

Jaaaaa genau sowas suche ich, will aber anstatt text wiederum 7 andere kästchen anzeigen....
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Element in gefloatetem Div unten auf gleicher Höhe ausrichten mimii CSS 8 07.11.2016 10:41
Kann Text nicht mittig in Listen Element (li) und Div ausrichten.. Nargaroth CSS 1 06.09.2013 18:58
Header entfernen tripple CSS 17 15.06.2010 15:41
Liste im IE StarSt0rm CSS 3 22.08.2007 20:04
Die maximale breite wird nicht erkannt notebook20000 CSS 9 22.06.2006 20:14


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:42 Uhr.