Wie zeigt man ein Gitter in voller Breite, wenn sein Gitter auf der rechten/linken Seite mit einem Klick auf die Schaltfläche und zurück auf das ursprüngliche Formular ausgeblendet wird?

Question

Ich weiß, wie man einen Abschnitt zeigt oder versteckt, aber ich bleibe dabei. Ich biete Screenshot zum besseren Verständnis.

Ich möchte, dass der linke Beistelltisch den Platz dieser rechten Seite Formular, wenn ich dieses Formular mit einem Klick auf die Schaltfläche und wieder mit einem Klick auf die Schaltfläche in Originalform zu verbergen.

<div class="row"> 
<div class="col-md-7 counselingTableDiv" id="counselingTableDivId"> 
    <h3 class="text-center">Counseling Time Table</h3> 
    <div class="table-responsive"> 
     <table class="table table-bordered" id="counselingTable"> 
      <thead> 
       <tr> 
        <th>Sat</th> 
        <th>Sun</th> 
        <th>Mon</th> 
        <th>Tue</th> 
        <th>Wed</th> 
        <th>Thu</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
       </tr> 
       <tr> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
       </tr> 
       <tr> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
       </tr> 
       <tr> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
       </tr> 
       <tr> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
       </tr> 
       <tr> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
        <td></td> 
       </tr> 
      </tbody> 
     </table> 
     <span id="deleteRoutineData" class="btn btn-success">Delete All Routine Data</span> 
     <span class="btn btn-success" id="setNewRoutine">Set New Routine</span> 
    </div> 
</div> 
    <div class="col-md-5 counselingSchedulesDiv" id="counselingSchedulesDivId"> 
     <div class="well"><h3>Enter Counseling Schedules</h3></div> 
     <form action="" method="POST"> 
      <div class="form-group"> 
       <label for="day">Day:</label> 
       <input type="text" name="day" class="form-control" id="day" placeholder="Day"> 
      </div> 
      <div class="form-group"> 
       <label for="courseName">Course Name:</label> 
       <input type="text" name="courseName" class="form-control" id="courseName" placeholder="Course Name"> 
      </div> 
      <div class="form-group"> 
       <label for="couseCode">Course Code:</label> 
       <input type="text" name="courseCode" class="form-control" id="courseCode" placeholder="Course Code"> 
      </div> 
      <div class="form-group"> 
       <label for="time">Starting Time:</label> 
       <input type="time" name="time" class="form-control" id="time"> 
      </div> 
      <div class="form-group"> 
       <label for="time">Ending Time::</label> 
       <input type="time" name="time" class="form-control" id="time"> 
      </div> 

      <button type="submit" id="submit">Submit</button> 
     </form> 
    </div> 

hier, wenn ich mich verstecken counselingScheduleDiv dann counselingTableDiv mit voller Breite angezeigt.

Answer 1

Sag Hallo zu meinem kleinen FreundFLEX Sie damit viel mehr tun können te Demo unten sehen, verwenden Sie Vollbild der Effekt auf Ihre

$(document).ready(function() { 
 
    $("#menu").on('click', function() { 
 
    $("#counselingSchedulesDivId").toggle(); 
 
    }) 
 
})

.wrapper { 
 
    display: flex; 
 
} 
 

 
.counselingTableDiv { 
 
    flex-grow: 1; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Click Here 
 
<i class="fa fa-bars" id="menu"></i> 
 
<div class="wrapper"> 
 
    <div class="col-md-7 counselingTableDiv" id="counselingTableDivId"> 
 
    <h3 class="text-center">Counseling Time Table</h3> 
 
    <div class="table-responsive"> 
 
     <table class="table table-bordered" id="counselingTable"> 
 
     <thead> 
 
      <tr> 
 
      <th>Sat</th> 
 
      <th>Sun</th> 
 
      <th>Mon</th> 
 
      <th>Tue</th> 
 
      <th>Wed</th> 
 
      <th>Thu</th> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      </tr> 
 
      <tr> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      </tr> 
 
      <tr> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      </tr> 
 
      <tr> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      </tr> 
 
      <tr> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      </tr> 
 
      <tr> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      <td></td> 
 
      </tr> 
 
     </tbody> 
 
     </table> 
 
     <span id="deleteRoutineData" class="btn btn-success">Delete All Routine Data</span> 
 
     <span class="btn btn-success" id="setNewRoutine">Set New Routine</span> 
 
    </div> 
 
    </div> 
 
    <div class="col-md-5 counselingSchedulesDiv" id="counselingSchedulesDivId"> 
 
    <div class="well"> 
 
     <h3>Enter Counseling Schedules</h3> 
 
    </div> 
 
    <form action="" method="POST"> 
 
     <div class="form-group"> 
 
     <label for="day">Day:</label> 
 
     <input type="text" name="day" class="form-control" id="day" placeholder="Day"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="courseName">Course Name:</label> 
 
     <input type="text" name="courseName" class="form-control" id="courseName" placeholder="Course Name"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="couseCode">Course Code:</label> 
 
     <input type="text" name="courseCode" class="form-control" id="courseCode" placeholder="Course Code"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="time">Starting Time:</label> 
 
     <input type="time" name="time" class="form-control" id="time"> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label for="time">Ending Time::</label> 
 
     <input type="time" name="time" class="form-control" id="time"> 
 
     </div> 
 

 
     <button type="submit" id="submit">Submit</button> 
 
    </form> 
 
    </div> 
 

 

 
</div>