Rechtes Bedienfeld Einblenden/Ausblenden beim Verschieben des Seiteninhalts nach links

Question

Ich habe ein rechtes Seitenteil, das sich erweitern und ausblenden lässt. Wenn der Benutzer auf die Option zum Erweitern klickt, wird der Inhalt des Körpers unten angezeigt, anstatt mit dem Panel nach links zu verschieben.

Wie kann ich den ursprünglichen Inhalt auch nach links verschieben?

#panel 
{ 
height: 500px; 
width: 200px; 
background: black; 
float: right; 
display: none;  
color: white; 
font-size: xx-large; 
} 
#click 
{ 
height: 70px; 
width: 25px; 
background: #CB5152; 
float: right; 
margin-top: 200px; 
} 


<div id='panel'> 
Info 
</div> 

<div id='click'> 
<div id="inner" class="fa fa-calculator fa-lg"></div> 
</div> 

<script> 
$('#click').click(function() 
{ 
$("#panel").animate({width:'toggle'},500);  
    }); 
</script> 

FORM

<div class="container"> 
    <div class="site-index"> 
    <div class="body-content"> 
     <div class="row"> 
      <div class="col-md-12"> 
      <form id="wizard_example" action=""> 

BEFORE http://searcherrorcodes.com/stack/before.PNG

AFTER http://searcherrorcodes.com/stack/after.PNG

Answer 1

Wenn das Formular (oder es ist Behälter) 100% der Breite (col-MD-12) aufzunehmen, dann Es gibt keinen Platz zum Verschieben des Formulars, wenn das Seitenfenster angezeigt wird. Sie müssten das Formular verkleinern und es auf der Seite zentrieren. Sie können das Seitenfeld auch auf "position: absolute" einstellen (stellen Sie sicher, dass der Z-Index höher ist als alle für das Formular festgelegten Werte). Dies würde jedoch dazu führen, dass das Seitenfenster über dem Formular angezeigt wird.