Toggle the sidebars to slide out and expand the content division using JavaScript

Question

Toggle the sidebars to slide out and expand the content division using JavaScript

I am looking to achieve a smooth sliding out effect for my sidebars while expanding the width of the middle content div. I want this action to be toggled back to its original state with another click.

Here's what I've attempted so far:

$('.headbar').click(function () {
    $(".leftside").animate({width: 'toggle'});
    $( ".rightside" ).animate({
        width: "toggle"
    }, 300, function() {
        $(".content").animate({width: '1200px'});
    });
});

The Issues I'm Facing

The headbar is flashing when the animation starts (probably a CSS bug)
The content does not toggle back to its original state

My Understanding Concept

https://i.sstatic.net/YLa3L.png

javascript jquery html css

Answer 1

Answer №1

To achieve this effect, I recommend using a CSS class transition triggered by jQuery instead of the jQuery animate function.

Here is a demonstration of the solution:

$(document).ready(function() {

  $('body').on('click', '.headbar', function(){
  $('body').toggleClass('expanded');
  });
  
});

.headbar {
  width: 100%;
  background: #303030;
  background-repeat: repeat;
  background-size: 38px 133px;
  height: 40px;
  background-position: 0px 39px;
  box-shadow: 0px 1px 5px;
  position: fixed;
  z-index: 1000;
  margin-top: -40px;
}

.leftside {
  position: fixed;
  left: 2%;
  top: 100px;
  height: 500px;
  width: 13%;
  background-color: rgba(123, 123, 123, 0.95);
}

.rightside {
  position: fixed;
  right: 2%;
  top: 100px;
  height: 500px;
  width: 13%;
  background-color: rgba(123, 123, 123, 0.95);
}

.scrollable {
  position: relative;
  top: 20px;
  min-height: 700px;
  width: 70%;
  margin: 0 auto;
  box-shadow: 0px 1px 5px;
  background: white;
}

/* ===================== */
/* Expanded Transition
/* ===================== */

.leftside, .rightside, .scrollable {
  transition: 0.3s;
}

body.expanded .scrollable {
  width: 100%;
}

body.expanded .leftside {
  left: -100%;
}

body.expanded .rightside {
  right: -100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="headbar"></div>
<div class="leftside"></div>
<div class="rightside"></div>
<div class="scrollable"></div>

View Demo on jsFiddle

Answer 2

To achieve this effect, I recommend using a CSS class transition triggered by jQuery instead of the jQuery animate function.

Here is a demonstration of the solution:

$(document).ready(function() {

  $('body').on('click', '.headbar', function(){
  $('body').toggleClass('expanded');
  });
  
});

.headbar {
  width: 100%;
  background: #303030;
  background-repeat: repeat;
  background-size: 38px 133px;
  height: 40px;
  background-position: 0px 39px;
  box-shadow: 0px 1px 5px;
  position: fixed;
  z-index: 1000;
  margin-top: -40px;
}

.leftside {
  position: fixed;
  left: 2%;
  top: 100px;
  height: 500px;
  width: 13%;
  background-color: rgba(123, 123, 123, 0.95);
}

.rightside {
  position: fixed;
  right: 2%;
  top: 100px;
  height: 500px;
  width: 13%;
  background-color: rgba(123, 123, 123, 0.95);
}

.scrollable {
  position: relative;
  top: 20px;
  min-height: 700px;
  width: 70%;
  margin: 0 auto;
  box-shadow: 0px 1px 5px;
  background: white;
}

/* ===================== */
/* Expanded Transition
/* ===================== */

.leftside, .rightside, .scrollable {
  transition: 0.3s;
}

body.expanded .scrollable {
  width: 100%;
}

body.expanded .leftside {
  left: -100%;
}

body.expanded .rightside {
  right: -100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="headbar"></div>
<div class="leftside"></div>
<div class="rightside"></div>
<div class="scrollable"></div>

View Demo on jsFiddle

Toggle the sidebars to slide out and expand the content division using JavaScript

Answer №1

Similar questions

CSS: Display the index of each ordered list item within a child element

Fixing malfunctioning bootstrap dropdown menus in a few simple steps

Creating animated image transitions (image swapping) using jQuery

Array vs Single Object - Comparing AngularJS / Javascript Data Structures (Basic)

I encountered difficulty clicking a button due to its unique button data-order-group-id while using python and selenium

Resizing an HTML table causes the background to break

Conditionally Add Columns to jQuery Datatables

Fixing the error message "page attempting to load scripts from an unauthenticated source"

Retrieve information from a local API using Next.js

Unidentified function error triggered by jQuery when clicked

How to perfectly align content on a webpage

The property 'matMenuTrigger' cannot be attached to 'a' because it is not recognized

Using Bootstrap's nav-pills inside a table

How to convert jQuery data into JSON format

What are some alternative ways to begin a photo album besides always using the first image

Is it feasible to display a message for a certain duration without using the alert() function upon clicking a button?

Tips for retrieving a variable from an XML file with saxonjs and nodejs

JavaScript's square bracket notation is commonly used to access nested objects within an object

Is there a way to verify the results of a Python script within a PHP webpage?

The callback function is unable to access this within the $.post method