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

[kristalljunge]

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?

 

[Tronjer]

jQuery Slide Methoden.

 

[kristalljunge]

Gibt's explizit ein Suchbegriff, um es mir irgendwie zu "ergoogeln"?

 

[SpiceLab]

Gibt's explizit ein Suchbegriff, um es mir irgendwie zu "ergoogeln"?

Um sich damit zunächst vertraut zu machen, zB jquery slide examples.

• http://api.jquery.com/category/effects/sliding/
  
• http://www.mkyong.com/jquery/jquery-slideup-slidedown-and-slidetoggle-example/

Um's dann etwas zu spezifizieren, zB jquery slidetoggle fade examples.

• http://api.jquery.com/category/effects/fading/
  
• http://www.techrepublic.com/blog/we...-fadeout-and-slidetoggle-functions-in-jquery/

 

[scbawik]

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

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.

 

[sysop]

Natürlich geht jquery, aber das ist auch mit sehr wenig Aufwand selbst zu lösen.

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