Guide to making a vertical clickable separator/line using bootstrap

Question

Guide to making a vertical clickable separator/line using bootstrap

Seeking advice on creating a layout where the left side consists of a sidebar menu occupying 24% and the right side contains main content taking up 75%, with a clickable vertical divider at 1% between them. When this line is clicked, the left part will hide, the line will shift to the left edge of the screen, and the right part will expand to 99%. Subsequent clicks on the line will revert the layout back to 24% on the left and 75% on the right.

How can I implement this interactive vertical divider?

I only require details on creating the clickable line itself; I am confident in my abilities to handle the functionality when it comes to resizing the left/right sections.

What method should be used to generate this line within an HTML structure? Would it involve using a div element, utilizing a vertical line image, or something else entirely?

Appreciate any insights provided, seems like it's all achievable through CSS magic :)

jquery css html twitter-bootstrap

Answer 1

Answer №1

Check out this awesome solution using Flexbox and Jquery

$('.clickable span').on('click', function() {
  $('.left-side').toggleClass('hidden');
  $(this).toggleClass('highlighted');
});

body, html {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  min-height: 100vh;
}

.left-side {
  flex: 0 0 25%;
  transition: all 0.3s ease-in;
}

.right-side {
  flex: 75%;
  position: relative;
  transition: all 0.3s ease-in;
}

span {
  position: absolute;
  height: 100vh;
  top: 0;
  left: 0;
  width: 3px;
  background: black;
}

.hidden {
  flex: 0 0 0;
  overflow: hidden;
}

.highlighted {
  width: 6px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="left-side">Left Side</div>
  <div class="right-side"><span tabindex="0"></span>Right Side</div>
</div>

Answer 2

Check out this awesome solution using Flexbox and Jquery

$('.clickable span').on('click', function() {
  $('.left-side').toggleClass('hidden');
  $(this).toggleClass('highlighted');
});

body, html {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  min-height: 100vh;
}

.left-side {
  flex: 0 0 25%;
  transition: all 0.3s ease-in;
}

.right-side {
  flex: 75%;
  position: relative;
  transition: all 0.3s ease-in;
}

span {
  position: absolute;
  height: 100vh;
  top: 0;
  left: 0;
  width: 3px;
  background: black;
}

.hidden {
  flex: 0 0 0;
  overflow: hidden;
}

.highlighted {
  width: 6px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <div class="left-side">Left Side</div>
  <div class="right-side"><span tabindex="0"></span>Right Side</div>
</div>

Answer 3

Answer №2

Here is an example I created:

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left">
left lorem ipsum dolor sit amet
</div>
<div id="divider">

</div>
<div id="right">
right content lorem ipsum dolor sit amet
</div>

CSS

div {
  height:300px;
}
#left{
  width: 23%;
  float:left;
  transition:all .4s ease-in-out;
  -webkit-transition:all .4s ease-in-out;
  -moz-transition:all .4s ease-in-out;
}
.toggle-left {
  width:0% !important;
  overflow:hidden;
}

#divider {
  width:2%;
  float:left;
  background:#000;
  cursor:pointer;
}
#right {
  width:75%;
  float:left;
  transition:all .4s ease-in-out;
  -webkit-transition:all .4s ease-in-out;
  -moz-transition:all .4s ease-in-out;
}
.toggle-right {
  width: 98% !important;
}

JS

$(document).ready(function(){
    $(document).on('click','#divider',function(){
    $("#left").toggleClass('toggle-left');   
    $("#right").toggleClass('toggle-right');
  });
});

https://jsfiddle.net/4b1p8nse/1/

Answer 4

Here is an example I created:

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="left">
left lorem ipsum dolor sit amet
</div>
<div id="divider">

</div>
<div id="right">
right content lorem ipsum dolor sit amet
</div>

CSS

div {
  height:300px;
}
#left{
  width: 23%;
  float:left;
  transition:all .4s ease-in-out;
  -webkit-transition:all .4s ease-in-out;
  -moz-transition:all .4s ease-in-out;
}
.toggle-left {
  width:0% !important;
  overflow:hidden;
}

#divider {
  width:2%;
  float:left;
  background:#000;
  cursor:pointer;
}
#right {
  width:75%;
  float:left;
  transition:all .4s ease-in-out;
  -webkit-transition:all .4s ease-in-out;
  -moz-transition:all .4s ease-in-out;
}
.toggle-right {
  width: 98% !important;
}

JS

$(document).ready(function(){
    $(document).on('click','#divider',function(){
    $("#left").toggleClass('toggle-left');   
    $("#right").toggleClass('toggle-right');
  });
});

https://jsfiddle.net/4b1p8nse/1/

Answer 5

Answer №3

Even though there are already solutions provided, I wanted to share a unique approach using bootstrap. The main content div has a left border which acts as a vertical trigger line. By overlaying it with another div, we can provide a pointer (hand) cursor for better user experience.

$(".nav-switch").on("click", function() {
  var $t = $(this),
    v = !!$t.data("visible");
  $t.data("visible", !v);
  $("div.nav-col").toggleClass("hidden");
  if (v) {
    /*currently showing nav*/
    $("div.main-col").removeClass("col-xs-9").addClass("col-xs-12");
  } else {
    $("div.main-col").removeClass("col-xs-12").addClass("col-xs-9");
  }
});

.main-col {
  background-color: #d39;
}
.nav-switch {
  border-left: 10px blue solid;
}
.nav-switch-pointer {
  border: 0px dotted yellow;
  width: 10px!important;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  float: left;
  clear: none;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3 nav-col">
      this is navigation column
    </div>
    <div class="col-xs-9 main-col">
      <div class="row fl-rt nav-switch" data-visible="1">
        <div class="nav-switch-pointer">
          &nbsp;
        </div>
        <div class="col-xs-12">
          this is right column.
          <br/>click on blue line to hide/show nav
          <br/>this div will adjust its width accordingly
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>wow!
        </div>
      </div>
    </div>
  </div>
</div>

Answer 6

Even though there are already solutions provided, I wanted to share a unique approach using bootstrap. The main content div has a left border which acts as a vertical trigger line. By overlaying it with another div, we can provide a pointer (hand) cursor for better user experience.

$(".nav-switch").on("click", function() {
  var $t = $(this),
    v = !!$t.data("visible");
  $t.data("visible", !v);
  $("div.nav-col").toggleClass("hidden");
  if (v) {
    /*currently showing nav*/
    $("div.main-col").removeClass("col-xs-9").addClass("col-xs-12");
  } else {
    $("div.main-col").removeClass("col-xs-12").addClass("col-xs-9");
  }
});

.main-col {
  background-color: #d39;
}
.nav-switch {
  border-left: 10px blue solid;
}
.nav-switch-pointer {
  border: 0px dotted yellow;
  width: 10px!important;
  cursor: pointer;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  float: left;
  clear: none;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>


<div class="container-fluid">
  <div class="row">
    <div class="col-xs-3 nav-col">
      this is navigation column
    </div>
    <div class="col-xs-9 main-col">
      <div class="row fl-rt nav-switch" data-visible="1">
        <div class="nav-switch-pointer">
          &nbsp;
        </div>
        <div class="col-xs-12">
          this is right column.
          <br/>click on blue line to hide/show nav
          <br/>this div will adjust its width accordingly
          <br/>
          <br/>
          <br/>
          <br/>
          <br/>wow!
        </div>
      </div>
    </div>
  </div>
</div>

Answer 7

Answer №4

I came up with a simple solution that should work for you.

$('.vd').on('click', function(){
  
  $('.left').toggleClass('not-visible');
  $('.right').toggleClass('all-visible');
  
});

html,body{
  height: 100%;  
}

.left, .vd, .right{
  display: block;
  float: left;
  height: 100%;
}

.left{
  width: 24%;  
  background: #f00;
}
.vd{
  width: 1%;  
  background: #000;
  cursor: pointer;
}
.right{
  width: 75%;  
  background: #f0f;
}
.animated{
  -webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
   -moz-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
     -o-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
        transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);  
}
.not-visible{
  width: 0%;  
}
.all-visible{
  width: 99%;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="left animated">Left content</div>
<div class="vd"></div>
<div class="right animated">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 8

I came up with a simple solution that should work for you.

$('.vd').on('click', function(){
  
  $('.left').toggleClass('not-visible');
  $('.right').toggleClass('all-visible');
  
});

html,body{
  height: 100%;  
}

.left, .vd, .right{
  display: block;
  float: left;
  height: 100%;
}

.left{
  width: 24%;  
  background: #f00;
}
.vd{
  width: 1%;  
  background: #000;
  cursor: pointer;
}
.right{
  width: 75%;  
  background: #f0f;
}
.animated{
  -webkit-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
   -moz-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
     -o-transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000); 
        transition: all 500ms cubic-bezier(0.190, 1.000, 0.220, 1.000);  
}
.not-visible{
  width: 0%;  
}
.all-visible{
  width: 99%;  
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="left animated">Left content</div>
<div class="vd"></div>
<div class="right animated">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Guide to making a vertical clickable separator/line using bootstrap

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Generate new variables based on the data received from an ajax call

Is it possible to transfer the style object from PaperProps to makeStyles in Material UI?

Using PHP GET Variable in an HTML Form

Problem with Flexbox Wrapping on iPhone 6

Fetching row data from Datatables, followed by executing fn.dataTable.ext.search.push

Why is my HTML image stored in the database not showing up in TCPDF?

What is the best way to prevent the span text from wrapping to the next line depending on the content of the previous span element using CSS?

Krajee Bootstrap File Input: Easily upload files along with your form

Screen readers are unable to "read" text that is identified through aria-describedby

Bars of varying heights (Google Chart)

Pair of columns create bootstrap 4 layout

Form Field Highlighting

Enhance the performance of Jquery using loops

How to resolve: Preventing Ajax - Post request from executing repetitively

Integrate CSS and JavaScript files into Node Express

Is there a method in AngularJS to automatically set app.comment to null if the point is not equal to 1 using front end logic?

How can I prevent an image from moving in relation to other objects on a webpage using HTML?

Menu options moved to the right of the screen

Using JSON within HTML: A guide to sanitizing stringified objects

Ways to Customize the Text Color in the Navigation Bar