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

How to handle multiple file uploads and save information in dual tables using Laravel

Learn the steps to successfully select a drop-down option by clicking on a button

Utilizing JQuery to Send Checkbox Selections to PHP

What do you do when you need to hide a table column that has a colspan

Using the class method to handle jQuery events alters the context

What is the method to switch between radio buttons on a webpage?

What is the process behind managing today's Google image of the day?

You can interact with our dropdown menu using the tab key, even when it is

Verify whether a div element is styled in a specific manner

Convert the 'value' attribute in HTML into a clickable link

Tips for establishing a universal onkeydown listener for all frames within a webpage?

Exploring the handling of the nth element within a jQuery each loop

When a block is clicked, jQuery will reveal that block while hiding the others sequentially, starting with the second block, then the third, and finally the fourth

Is it possible for me to include an ::after pseudo-element within a label that contains an input field?

Utilizing data attributes in E2E testing for optimal results

Is there a way to include all images from a local/server directory into an array and then utilize that array variable in a different file?

Issue with CSS on various mobile devices

Remove the blue outline in Fancybox when clicked

Responsive design challenge

What is the best way to restrict the selection of specific days of the week on an HTML form date input using a combination of JavaScript, React, and HTML?