Ankündigung

Einklappen
Keine Ankündigung bisher.

CSS tab mit akkordeon

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • CSS tab mit akkordeon

    Hallo,
    ich habe zur Zeit zwei Tabs und habe es mit Akkordeon kombiniert, aber habe ein Problem, was ich nicht lösen kann.
    Problem hier ist das ich beide Tabs aufrufen kann, und beide nebeneinander angezeigt werden.
    Was zu falsche Darstellung führt, es soll nur immer ein Tab aufgehen bei Mausklick und wenn eins auf ist soll die andere was auf ist - dann zu gehen!
    Code:
    <input type="checkbox" name="it" id="i1" />
            <label for="i1">Tab1</label>
            <ul class="ul">
                <li><a href="#">link 1</a></li>
                <li><a href="#">link 2</a></li>
                <li><a href="#">link 2</a></li>
            </ul>
    ...
    <input type="checkbox" name="it" id="i2" />
    <label for="i2">Tab2</label>
    ...
    Wie kann ich das lösen??
    Mit Javascript, CSS3 .... ?

    Danke im voraus
    Gruß c01001.

    Ob eine Sache gelingt, erfährst du nicht, wenn du darüber nachdenkst, sondern wenn du es ausprobierst.

  • #2
    Hallo

    Deine Informationen sind leider sehr sparsam. Nach denen würde ich den Checkbox-Hack verwenden.

    Benutzerfreundlich wäre auch die Informationen so anzuzeigen, dass sie gleichzeitig geöffnet werden können und dann strukturiert über- oder nebeneinander stehen. Viele Besucher finden es nervig, wenn Informationen nur wechselweise angezeigt werden können.

    Gruss

    MrMurphy

    Kommentar


    • #3
      Hi,
      was möchtest du noch wissen ?
      Wie oder was ist Checkbox-Hack ?

      Also einfach gesagt ich kann beide CheckBoxes aktivieren und deaktivieren und das soll nicht sein!
      Ob eine Sache gelingt, erfährst du nicht, wenn du darüber nachdenkst, sondern wenn du es ausprobierst.

      Kommentar


      • #4
        Hallo

        und das soll nicht sein!
        Warum nicht? Deine Besucher würden sich freuen.

        Wie oder was ist Checkbox-Hack ?
        Den Begriff habe ich dir genannt damit du weißt, wonach du suchen kannst um dein Problem zu lösen. Als Ergebnis findest du dann unter anderem folgende Seiten

        http://www.olivergast.de/blog/2013/0...checkbox-hack/

        und

        http://bitnerds.de/2016/08/25/css-ha...checkbox-hack/

        Um dir konkret helfen zu können bräuchte ich einen Link zu deiner Seite.

        Gruss

        MrMurphy

        Kommentar


        • #5
          Zitat von c01001 Beitrag anzeigen
          Wie oder was ist Checkbox-Hack ?
          http://tympanus.net/codrops/2012/02/...ion-with-css3/

          Kommentar


          • #6
            02.PNG
            weil das dann bei mir leider so aussieht! und das soll es nicht!
            Kann leider kein link geben!
            Der Server nicht online ist.

            Achso teil des Codes habe ich von hier:
            http://codepen.io/Frecosse/pen/Akwdo
            Ob eine Sache gelingt, erfährst du nicht, wenn du darüber nachdenkst, sondern wenn du es ausprobierst.

            Kommentar


            • #7
              Hallo

              Achso teil des Codes habe ich von hier:
              Das Beispiel beruht doch schon mal auf dem Checkbox-Hack.

              Wenn sich die Infos nur wechselseitig öffnen lassen sollen brauchst du eigentlich nur bei den input-Elementen den

              Code:
              type="checkbox"
              gegen

              Code:
              type="radio"
              zu tauschen.

              Gruss

              MrMurphy

              Kommentar


              • #8
                Hallo,
                habe das mit radio und javascript hinbekommen, nicht so wie ich es wollte aber besser als vorher

                Danke.
                Gruß c01001.
                Ob eine Sache gelingt, erfährst du nicht, wenn du darüber nachdenkst, sondern wenn du es ausprobierst.

                Kommentar


                • #9
                  Wäre von selbst gar nicht auf die Idee gekommen, sowas mit Radio-Inputs zu machen. Ich mache das immer so ähnlich.
                  [B]Es ist schon alles gesagt. Nur noch nicht von allen.[/B]

                  Kommentar


                  • #10
                    Ich nutze die Radio-Buttons dafür auch, kommt komplett ohne JavaScript aus.
                    Competence-Center -> Enjoy the Informatrix
                    PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

                    Kommentar


                    • #11
                      Zitat von Arne Drews Beitrag anzeigen
                      Ich nutze die Radio-Buttons dafür auch, kommt komplett ohne JavaScript aus.
                      Gibt es Browser, auf die Du dann verzichten musst?
                      [B]Es ist schon alles gesagt. Nur noch nicht von allen.[/B]

                      Kommentar


                      • #12
                        Bisher habe ich keine negativen Erfahrungen gemacht. Ich entwickel meist auf Chrome-Basis und teste dann im FF und IE11 und Edge.
                        Ich muss zwar zugeben, dass ich von solchen Dirty-Tricks, HTML-Elemente ihre Grundfunktionalität zu entziehen kein sonderlicher Fan bin, aber für die TabbedContent-Geschichte ist das für mich eine gute Lösung.
                        2017 wird eBay einige Änderungen fahren, mit denen dann JS nicht mehr funktionieren wird. Spätestens dafür benötige ich dann einen Workaround und der funktioniert ziemlich gut, muss ich gestehen.
                        Competence-Center -> Enjoy the Informatrix
                        PHProcks!Einsteiger freundliche TutorialsPreComposed Packages

                        Kommentar

                        Lädt...
                        X