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

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

kristalljunge

Mitglied
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?


akx52y6d.jpg
 
Werbung:
Werbung:
Leider kann man als Ziel einer Animation nicht heigt:auto angeben, sondern es ist ein fester Wert erforderlich, den man ausmessen muss.

Ist schon länger her, aber wenn ich mich richtig erinnere lässt sich das so
Code:
max-height: 0;
overflow: hidden;
transition: max-height 1s;

// anzeigen
max-height:100000px;
mehr oder weniger umgehen.

Außerdem ist mir keine Lösung bekannt, wie man einen getrennten Schließen-Knopf realisieren kann.

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.
 
Natürlich geht jquery, aber das ist auch mit sehr wenig Aufwand selbst zu lösen.
HTML:
    <script type="text/javascript">

    function zeigeFenster(PID)
    {
        if(document.getElementById(PID).className == 'overlay')
        {
            document.getElementById(PID).className = 'overlayHidden';
        }

        else
        {
            document.getElementById(PID).className = 'overlay';
        }

    }

    </script>

    <style type="text/css">
    .overlayHidden
    {
      display: none;
    }

    .overlay
    {
      width: 30em;
      border: 1px solid #e7c157;
      position: relative;
      margin: auto;
      margin-top:15px;
      margin-bottom:15px;
      padding: 1em;
    }

    #info
    {
        background-color:blue;
    }

    #content
    {
        background-color:green;
    }

    #oben
    {
        background-color:gray;
    }

    </style>


<a onclick="zeigeFenster('info');" title="auf/zu" style="background-color:red;">Zusatzinfo</a>
<div id="oben">
    Das ist der Text im oberen Bereich<br>
    Lorem, Ipsum<br>
    Test
</div>

<div id="info" class="overlayHidden">
  <form method="post" action="#">
    Das ist der Text im versteckten Bereich
  </form>

</div>

<div id="content">
    Das ist der Text im Ciontent Bereich<br>
    Lorem, Ipsum<br>
    Test
</div>
 
Zuletzt bearbeitet:
Werbung:
Zurück
Oben