CODEWITHSUNDEEP
javascripthtmlcssresize
ajrlewis
ajrlewis

Reputation: 3058

Resizing columns when a side panel is toggled

I'm adopting a simple CSS styling where I split a row into 12 columns.

I'm trying to make three panels: the sidebar (which should occupy 3 columns on the left when it's expanded and 0 columns when it's contracted), the toggle panel (which should occupy 1 column) and then the content panel (which should occupy 11 columns)

When I press the toggle button, the sidebar should become visible and the toggle and content panels should shrink to fit this expansion (rather than move to a new line as they currently do as the total number of columns is now greater than 12). How can I achieve this?

EDIT

Below is a code snipped: 

function openSidebar() {
  console.log("openSideBar()");
  if ($("#sidebar").is(":visible")) {
    $("#sidebar").hide();
  } else {
    $("#sidebar").show();
  }
}
* {
  box-sizing: border-box;
  margin: 0;
}

[class*="col-"] {
  float: left;
  padding: 2vh;
  width: 100%;
}

.col-1 { width: 8.33%; }
.col-2 { width: 16.66%; }
.col-3 { width: 25%; }
.col-4 { width: 33.33%; }
.col-5 { width: 41.66%; }
.col-6 { width: 50%; }
.col-7 { width: 58.33%; }
.col-8 { width: 66.66%; }
.col-9 { width: 75%; }
.col-10 { width: 83.33%; }
.col-11 { width: 91.66%; }
.col-12 { width: 100%; }

.row::after {
  clear: both;
  content: "";
  display: table;
  height: auto;
}
<!DOCTYPE html>
<html lang="en">

  <head>
  </head>
    
  <body>
  
    <div class="row">

      <div id="sidebar" class="col-3" hidden style="background-color: green;"> here is the content of a sidebar that slides to the right</div>

      <div class="col-1" style="background-color: yellow;">
        <button onclick="openSidebar();">toggle</button>
      </div>

      <div class="col-11" style="background-color: red;">
      this panel should shrink when the sidebar is expanded.
      </div>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>

</body>

Upvotes: 1

Views: 516

Answers (1)

Deepu Reghunath
Deepu Reghunath

Reputation: 9683

Use jquery animate function to toggle the sidebar. Use a custom class for the sidebar instead of col-3

function openSidebar() {
      $("#sidebar").animate({
      width: "toggle"
    });
  }
body {
  padding:0;
  margin:0;
}
.row {
  display:flex;
}    
.test {
  width:25%;
}
.col-1 {
  width:8.33%;
  overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<div class="row">

  <div id="sidebar" class="test"  style="background-color: green;"> here is the content of a sidebar that slides to the right</div>

  <div id="toggle" class="col-1" style="background-color: yellow;">
    <button onclick="openSidebar();">toggle</button>
  </div>

  <div id="content" class="col" style="background-color: red;">
    this panel should shrink when the sidebar is expanded rather than move to a new line. Width auto
  </div>

</div>

Upvotes: 1

Related Questions