Element per Knopfdruck verschwinden lassen und anderes Element nimmt den Platz ein

Hallo,

für soetwas benutzt man JavaScript.
Das ist eine Sprache die clientseitig läuft, sprich sie kann nach dem Laden der Seite ausgeführt werden.

Um JavaScript in deine Seite einzubinden, verlinkst du entweder eine .js - Datei im head Bereich (oder am Ende deines bodys) deiner Seite:
<script type="text/javascript" src="deinedatei.js"></script>

oder du fügst direkt den Quellcode ein:
<script type="text/javascript">// do something ..</script>

Du kannst mit JavaScript deine CSS (style) Angaben verändern und die Klick-Funktion hinzufügen:

Entweder (veraltet) über das HTML Attribut onclick="macheDieAnimation();" oder direkt über JavaScript (im script-Tag):
document.getElementTagName('div')[0].onclick = function() {};

Alternativ kannst du deinen divs auch eine Id geben (<div id="deineid" ..)
Dann kannst du per document.getElementById('deineid').onclick .. die Funktion hinzufügen.

Solltest du mehr solcher Dinge machen wollen, eignet sich die Bilbiothek jQuery für soetwas.

Stylesheets kannst du per JS so ändern:
var dom = document.getElementBy...
dom.style.width = value;

Deine Divs dürften jedoch sehr schwer klickbar sein, sie haben keine Farbe und sind wahrscheinlich weiß auf weißen Hintergrund.
Du kannst auch das HTML Objekt button benutzen.
<button id="deineid">Drück mich!</button>

viel Erfolg

Das sieht stark nach einer Aufgabe aus, als eines deiner Projekte, richtig?
Ich habe dir alle Informationen die du benötigst gegeben und du kannst/willst damit nichts anfangen?

In 2Minuten (l.Aktivität vor deiner Antwort 19:23) hast du das gelsen und versucht umzusetzen oder wie?
Wenn du liest, findest du sogar eigentlich den ganzen Quellcode
Das ist das lustige dabei.

Achso "lesen" kannst du CSS Attribute genauso wie "schreiben" in JS.
var wdt = dom.style.width; gibt dir die Breite also beispielsweise zurück
oder über dom.style.getAttribute('attr');
Letzteres weiß ich aber nicht genau

Kriegst du schon hin

Und hier noch der erste Google-Eintrag zu diesem Thema:
http://de.selfhtml.org/javascript/objekte/style.htm

OK du hast es versucht.
Mit jQuery geht das eigentlich etwas einfacherer:

Definiere 2 CSS Klassen pro Objekt:

<style>
body {
 margin:0; padding: 0;
}


div.left-normal {
 /* css aus deinem popout div */
}


div.left-popout {
 display: none; /* oder width: 0; */
 overflow: hidden; /* behebt dein problem */
}


div.right-normal {
 /* css aus deinem main div */
}


div.right-active {
 width: 100%;
}
</style>

und wechsle dann mit jQuery einfach die Klassen bei der on-Click Funktion

$(document).ready(function() {
 $("#deineknopfid").click(function() { // wenn dein button gedrückt


   if ($("#main").hasClass('right-normal')) { // wenn main die css klasse right-normal hat
       $("#main").removeClass('right-normal');
       $("#main").addClass('right-active');
       $("#popout").removeClass('left-normal');
       $("#popout").addClass('left-popout');
       $(this).html('Zurück');
   }
  else { // wenn main klasse right-active hat bzw. wenn main nicht right-normal hat
       $("#main").removeClass('right-active');
       $("#main").addClass('right-normal');
       $("#popout").removeClass('left-popout');
       $("#popout").addClass('left-normal');
       $(this).html('Drück mich');
  }


 });
}); // wenn dokument geladen

HTML Code dazu:

<button id="deineknopfid">Drück mich</button>


<div id="popout" class="left-normal"></div>
<div id="main" class="right-normal"></div>

Hab das aber nicht getestet.
Und damit hättest du auch keine Animation
Wieso hast du 2x $(window).load() drin?