Stellt euch vor, ihr braucht eine Karte und eine Liste. Zum Beispiel um Hotels anzuzeigen oder Clubs oder was auch immer. Die beiden UI Elemente konkurrieren um den knappen Platz am Bildschirm: Je größer die Liste, desto mehr Informationen kann sie desto schöner anzeigen. Mehr Platz für große Bilder und dergleichen. Eine kleine Karte bringt aber wenig Überblick und ist umständlich zu bedienen, zu viel Pan & Zoom.

Eine mögliche Lösung ist die Karte ausfahrbar zu machen und das geht mit CSS3 Transitions und Flexbox Layout besonders schick und einfach.

Folgendes Markup:

1<div class="container">
2    <div id="map">
3    </div>
4    <div id="handle">+</div>
5    <div id="list"></div>
6</div>

Noch nicht viel dabei. Ein Container für alles, die Karte, ein Handle welches die Aktion triggern soll und die Liste. Der Trick ist jetzt, den Container mit Flexbox zu layouten (die Vendor Prefixe lasse ich weg).

1div.container {
2        display: flex; /* flex layout*/
3        flex-direction: column; /* bitte alles in spalten */
4        justify-content: center; /* vertikal zentriert */
5        align-items: center; /* horizontal zentriert */
6}

Die Karte machen wir 1 Flex hoch, wollen das Attribut aber animiert haben.

1div#map {
2    display: flex;
3        flex: 1;
4        transition: flex .2s;
5}

Sobald auf das Handle geklickt wurde, machen wir einfach die Karte größer und der Rest passiert von selbst.

1var toggled = false;
2$( "#handle" ).click( function() {
3  if ( !toggled )
4    $( "#map" ).css( "flex", "6" );
5  else
6    $( "#map" ).css( "flex", "1" );
7  toggled = !toggled;
8});

Ein Webkit Demo ist hier zu sehen.