1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

DIV nach Klick zwischen DIV's erscheinen und ausblenden lassen.

Dieses Thema im Forum "JavaScript" wurde erstellt von kristalljunge, 19 April 2017.

  1. kristalljunge

    kristalljunge Mitglied

    Registriert seit:
    24 Mai 2014
    Beiträge:
    50
    Punkte für Erfolge:
    6
    Hey,

    ich suche gerade nach einer Möglichkeit, um eine Sache möglichst einfach und "stilvoll" zu lösen. Und zwar möchte ich, dass wenn man auf den blauen Button klickt, sich zwischen dem schwarzen Balken und dem roten Inhalt ein Bereich öffnet, der quasi über den roten Inhalt informiert. Dieser geöffnete Bereich soll auch ein X-Icon besitzen, um den Bereich wieder zu schließen. Beim "Ein-" und "Ausfahren" des geöffneten Bereichs soll eine kleine Transition beigefügt werden, dass der "Bereich" nicht einfach erscheint, sondern zwischen dem Balken und dem roten Bereich ausfährt. Nach Möglichkeit soll das auch auf Handys sicht- und umsetzbar sein. Versteht ihr was ich meine?

    Mit :focus und transition komm ich irgendwie einfach nicht an mein Ziel.
    Hat jemand Ideen wie ich das umsetzen kann?


    [​IMG]
     
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. Tronjer

    Tronjer Moderator Team Moderator

    Registriert seit:
    8 Oktober 2010
    Beiträge:
    4.849
    Punkte für Erfolge:
    83
    jQuery Slide Methoden.
     
  3. kristalljunge

    kristalljunge Mitglied

    Registriert seit:
    24 Mai 2014
    Beiträge:
    50
    Punkte für Erfolge:
    6
    Gibt's explizit ein Suchbegriff, um es mir irgendwie zu "ergoogeln"?
     
  4. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.669
    Punkte für Erfolge:
    83
    Um sich damit zunächst vertraut zu machen, zB jquery slide examples.
    Um's dann etwas zu spezifizieren, zB jquery slidetoggle fade examples.
     
  5. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    288
    Punkte für Erfolge:
    28
    Mit transition warst Du schon auf dem richtigen Wege. Nimmt man noch eine Checkbox und die Pseudoklasse :checked hinzu, kommt man zum Ziel:
    Code (text):
    1.     <input type="checkbox" id="showhide" />
    2.     <div id="black"></div>
    3.     <div id="content">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>
    4.     <div id="red"></div>
    5.     <style>
    6.         #showhide:after {
    7.             content: 'Inhalt anzeigen';
    8.             color: white;
    9.             display: inline-block;
    10.             width: 100px;
    11.             height: 20px;
    12.             background-color: blue;
    13.         }
    14.         #showhide:checked:after {
    15.             content: 'Inhalt verbergen';
    16.         }
    17.         #showhide:checked ~ #content {
    18.             height: 210px;
    19.         }
    20.         #black {
    21.             height: 20px;
    22.             background-color: black;
    23.         }
    24.         #content {
    25.             width: 400px;
    26.             height: 0;
    27.             margin: auto;
    28.             overflow: hidden;
    29.             transition: height 500ms;
    30.         }
    31.         #red {
    32.             height: 200px;
    33.             background-color: red;
    34.         }
    35.     </style>
    Ein Nachteil dieser Lösung soll nicht verschwiegen werden: Leider kann man als Ziel einer Animation nicht heigt:auto angeben, sondern es ist ein fester Wert erforderlich, den man ausmessen muss. Daher habe ich div#content eine feste Breite gegeben, damit auch die Höhe fest ist. Außerdem ist mir keine Lösung bekannt, wie man einen getrennten Schließen-Knopf realisieren kann.
    Aus diesen Gründen ist wahrscheinlich eine Lösung mit jQuery mehr zu empfehlen.
     
    Zuletzt bearbeitet: 20 April 2017
  6. scbawik

    scbawik Senior HTML'ler

    Registriert seit:
    14 Juli 2011
    Beiträge:
    2.304
    Punkte für Erfolge:
    83
    Ist schon länger her, aber wenn ich mich richtig erinnere lässt sich das so
    Code (text):
    1. max-height: 0;
    2. overflow: hidden;
    3. transition: max-height 1s;
    4.  
    5. // anzeigen
    6. max-height:100000px;
    mehr oder weniger umgehen.

    Radio statt Checkbox würde ich jetzt spontan sagen.
    Der Schließen-Knopf setzt den entsprechenden Radio-Value einfach wieder zurück.

    Aber man muss schon dazu sagen, dass solche CSS-only Lösungen in der Praxis meistens alles nur unnötig verkomplizieren. Insbesondere bei dynamischer Struktur.
     
  7. Sempervivum

    Sempervivum Aktives Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    288
    Punkte für Erfolge:
    28
    Ah ja, jetzt fällt es mir auch wieder ein. Ich hatte mal wegen dieses Problems bei Stackoverflow nachgefragt und da hatten sie auch diese Lösung empfohlen.

    Stimmt, so einfach kann es sein.

    Stimme zu, sie sind meistens schwer lesbar und man durchbricht vollkommen die Semantik von Formularelementen. Ist aber immer eine interessante Aufgabe, so etwas auszuarbeiten.
     
  8. sysop

    sysop Mitglied

    Registriert seit:
    10 Juli 2015
    Beiträge:
    133
    Punkte für Erfolge:
    18
    Natürlich geht jquery, aber das ist auch mit sehr wenig Aufwand selbst zu lösen.
    HTML:
    1.  
    2.     <script type="text/javascript">
    3.  
    4.     function zeigeFenster(PID)
    5.     {
    6.         if(document.getElementById(PID).className == 'overlay')
    7.         {
    8.             document.getElementById(PID).className = 'overlayHidden';
    9.         }
    10.  
    11.         else
    12.         {
    13.             document.getElementById(PID).className = 'overlay';
    14.         }
    15.  
    16.     }
    17.  
    18.     </script>
    19.  
    20.     <style type="text/css">
    21.     .overlayHidden
    22.     {
    23.       display: none;
    24.     }
    25.  
    26.     .overlay
    27.     {
    28.       width: 30em;
    29.       border: 1px solid #e7c157;
    30.       position: relative;
    31.       margin: auto;
    32.       margin-top:15px;
    33.       margin-bottom:15px;
    34.       padding: 1em;
    35.     }
    36.  
    37.     #info
    38.     {
    39.         background-color:blue;
    40.     }
    41.  
    42.     #content
    43.     {
    44.         background-color:green;
    45.     }
    46.  
    47.     #oben
    48.     {
    49.         background-color:gray;
    50.     }
    51.  
    52.     </style>
    53.  
    54.  
    55. <a onclick="zeigeFenster('info');" title="auf/zu" style="background-color:red;">Zusatzinfo</a>
    56. <div id="oben">
    57.     Das ist der Text im oberen Bereich<br>
    58.     Lorem, Ipsum<br>
    59.     Test
    60. </div>
    61.  
    62. <div id="info" class="overlayHidden">
    63.   <form method="post" action="#">
    64.     Das ist der Text im versteckten Bereich
    65.   </form>
    66.  
    67. </div>
    68.  
    69. <div id="content">
    70.     Das ist der Text im Ciontent Bereich<br>
    71.     Lorem, Ipsum<br>
    72.     Test
    73. </div>
    74.  
    75.  
    76.  
     
    Zuletzt bearbeitet: 21 April 2017