When one div is hidden, the width of another div will automatically adjust to 100%

Question

When one div is hidden, the width of another div will automatically adjust to 100%

Is there a way to make #leftdiv expand to 100% when #rightdiv is hidden, and have both <div>s positioned next to each other when a button is clicked?

I have successfully aligned both <div>s next to each other upon button click, but I would like #leftdiv to occupy 100% width when #rightdiv is invisible.

function toggleSideBar() {
    var div = document.getElementById('rightdiv');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    } else {
        div.style.display = 'block';
    }
};

#leftdiv
{
   border: solid medium thick;
   float: left;
   display: inline-block;
   background-color: #ffc;
   /*border: 1px solid red;*/
}

#rightdiv
{
   width: 50%;
   border: solid medium thick;
   background-color: #ffa;
   display: none;
   float:right;
}

<input type="button" id="btn" value="toggle" onclick="toggleSideBar()" />
    <div id="main-content">
        <div id="leftdiv">selectable</div>
        <div id="rightdiv">right panel</div>
    </div>`

javascript html css

Answer 1

Answer №1

One way to tackle this design is by utilizing flexbox:

HTML

<input type="button" id="btn" value="toggle" onclick="toggleSideBar()" />
<div id="main-content">
  <div id="leftdiv">selectable</div>
  <div id="rightdiv">right panel</div>
</div>

CSS

#main-content {
  display: flex;
  flex-flow: row nowrap;
}

#leftdiv {
  background-color: #ffc;
  flex: 1 1 auto;
  border: 1px solid red;
}

#rightdiv {
  flex: 1 1 auto;
  background-color: #ffa;
  display: none;
  border: 1px solid green;
}

JS

function toggleSideBar() {  
    var div = document.getElementById('rightdiv');

    if (div.style.display !== 'none') {
        div.style.display = 'none';
    } else {
        div.style.display = 'block';
    }
};

The reason why your previous attempt didn't yield the desired outcome is due to the utilization of float. Using float causes an element to only take up space based on its content. To resolve this, a width:100% would need to be applied to the left container when using float. Furthermore, to dynamically switch between 50% and 100% width, the style needs to be toggled in the function.

Utilizing flexbox eliminates the need for these adjustments, as children are automatically arranged in the specified direction, in this case, row. Setting flex: 1 1 auto; for both containers allows for equal growth and shrinkage to fill available space. (Using flex: 1 0 auto; would achieve the same result in this scenario.)

Answer 2

One way to tackle this design is by utilizing flexbox:

HTML

<input type="button" id="btn" value="toggle" onclick="toggleSideBar()" />
<div id="main-content">
  <div id="leftdiv">selectable</div>
  <div id="rightdiv">right panel</div>
</div>

CSS

#main-content {
  display: flex;
  flex-flow: row nowrap;
}

#leftdiv {
  background-color: #ffc;
  flex: 1 1 auto;
  border: 1px solid red;
}

#rightdiv {
  flex: 1 1 auto;
  background-color: #ffa;
  display: none;
  border: 1px solid green;
}

JS

function toggleSideBar() {  
    var div = document.getElementById('rightdiv');

    if (div.style.display !== 'none') {
        div.style.display = 'none';
    } else {
        div.style.display = 'block';
    }
};

The reason why your previous attempt didn't yield the desired outcome is due to the utilization of float. Using float causes an element to only take up space based on its content. To resolve this, a width:100% would need to be applied to the left container when using float. Furthermore, to dynamically switch between 50% and 100% width, the style needs to be toggled in the function.

Utilizing flexbox eliminates the need for these adjustments, as children are automatically arranged in the specified direction, in this case, row. Setting flex: 1 1 auto; for both containers allows for equal growth and shrinkage to fill available space. (Using flex: 1 0 auto; would achieve the same result in this scenario.)

Answer 3

Answer №2

To achieve the desired effect without the need for JavaScript manipulation of the width, you can style the elements as table-cell:

function toggleSideBar() {
    var div = document.getElementById('rightdiv');
if (div.style.display !== 'none') {
    div.style.display = 'none';
} else {
div.style.display = 'table-cell';
}
};

#leftdiv {
border: solid medium thick;
    width: auto;
display: table-cell;
    background-color: #ffc;
}

#rightdiv {
    width: 50%;
    border: solid medium thick;
    background-color: #ffa;
    display: none;
}

#main-content {
    display:table;
    width: 100%;
}

<input type="button" id="btn" value="toggle" onclick="toggleSideBar()" />
<div id="main-content">
    <div id="leftdiv">selectable</div>
    <div id="rightdiv">right panel</div>
</div>`

Answer 4

To achieve the desired effect without the need for JavaScript manipulation of the width, you can style the elements as table-cell:

function toggleSideBar() {
    var div = document.getElementById('rightdiv');
if (div.style.display !== 'none') {
    div.style.display = 'none';
} else {
div.style.display = 'table-cell';
}
};

#leftdiv {
border: solid medium thick;
    width: auto;
display: table-cell;
    background-color: #ffc;
}

#rightdiv {
    width: 50%;
    border: solid medium thick;
    background-color: #ffa;
    display: none;
}

#main-content {
    display:table;
    width: 100%;
}

<input type="button" id="btn" value="toggle" onclick="toggleSideBar()" />
<div id="main-content">
    <div id="leftdiv">selectable</div>
    <div id="rightdiv">right panel</div>
</div>`

Answer 5

Answer №3

Here is an example of how this can be achieved:

http://jsfiddle.net/nw8Ln6ha/18/

<input type="button" id="btn" value="toggle" onclick="toggleSideBar()" />
<div id="main-content">
   <div id="leftdiv">selectable</div>
   <div id="rightdiv">right panel</div>
</div>
<script>
  function toggleSideBar() {

    var r_div = document.getElementById('rightdiv');
    var l_div = document.getElementById('leftdiv');
    if (r_div.style.display !== 'none') {
        r_div.style.display = 'none';
        l_div.setAttribute('style', '');
    }
    else {
        r_div.style.display = 'block';
        l_div.setAttribute('style', '30%');
    }

};
</script>

css

#leftdiv
{

  border: solid medium thick;
  float: left;
  display: inline-block;
  background-color: #ffc;
 /*border: 1px solid red;*/
  width: 100%;

}

#rightdiv
{

 width: 50%;
 border: solid medium thick;
 background-color: #ffa;
 display: block;
 float:right;

}

Answer 6

Here is an example of how this can be achieved:

http://jsfiddle.net/nw8Ln6ha/18/

<input type="button" id="btn" value="toggle" onclick="toggleSideBar()" />
<div id="main-content">
   <div id="leftdiv">selectable</div>
   <div id="rightdiv">right panel</div>
</div>
<script>
  function toggleSideBar() {

    var r_div = document.getElementById('rightdiv');
    var l_div = document.getElementById('leftdiv');
    if (r_div.style.display !== 'none') {
        r_div.style.display = 'none';
        l_div.setAttribute('style', '');
    }
    else {
        r_div.style.display = 'block';
        l_div.setAttribute('style', '30%');
    }

};
</script>

css

#leftdiv
{

  border: solid medium thick;
  float: left;
  display: inline-block;
  background-color: #ffc;
 /*border: 1px solid red;*/
  width: 100%;

}

#rightdiv
{

 width: 50%;
 border: solid medium thick;
 background-color: #ffa;
 display: block;
 float:right;

}

Answer 7

Answer №4

Kindly review the code snippet provided below:

HTML

<input type="button" id="btn" value="toggle" onclick="toggleSideBar()" />
<div id="main-content">
    <div id="leftdiv">selectable</div>
    <div id="rightdiv">right panel</div>
</div>

CSS

#leftdiv
{
   border: solid medium thick;
   float: left;
   display: inline-block;
   background-color: #ffc;
   height:50px;
   width: 50%;
   /*border: 1px solid red;*/
}

#rightdiv
{
   width: 50%;
   height:50px;
   border: solid medium thick;
   background-color: #ffa;
   display: none;
   float:right;
}

JS

function toggleSideBar() {
    debugger;
    var div = document.getElementById('rightdiv');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
   document.getElementById('leftdiv').style.width = '100%';
    }
    else {
        div.style.display = 'block';
 document.getElementById('leftdiv').style.width = '';
    }

};

You may also investigate a live demonstration of this code on :

http://jsfiddle.net/zjea48bu/19/

Answer 8

Kindly review the code snippet provided below:

HTML

<input type="button" id="btn" value="toggle" onclick="toggleSideBar()" />
<div id="main-content">
    <div id="leftdiv">selectable</div>
    <div id="rightdiv">right panel</div>
</div>

CSS

#leftdiv
{
   border: solid medium thick;
   float: left;
   display: inline-block;
   background-color: #ffc;
   height:50px;
   width: 50%;
   /*border: 1px solid red;*/
}

#rightdiv
{
   width: 50%;
   height:50px;
   border: solid medium thick;
   background-color: #ffa;
   display: none;
   float:right;
}

JS

function toggleSideBar() {
    debugger;
    var div = document.getElementById('rightdiv');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
   document.getElementById('leftdiv').style.width = '100%';
    }
    else {
        div.style.display = 'block';
 document.getElementById('leftdiv').style.width = '';
    }

};

You may also investigate a live demonstration of this code on :

http://jsfiddle.net/zjea48bu/19/

When one div is hidden, the width of another div will automatically adjust to 100%

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

I created a thorough duplicate that successfully addressed an issue with a table

Using regex in Javascript to find and match an ID within a string

Uniquely combining multiple jQuery appendTo functions into a single call

What's the process for including delivery charges in Stripe transactions?

Tips for declaring the project npm registry within the package.json configuration file

What steps should I take to solve this wheel-related issue in my Vue 3 application?

Performing self-addition on a randomly generated number using JavaScript

Struggling with aligning items vertically in Bootstrap 4?

Guide to integrating a static page with personalized CSS and JavaScript resources within a Rails project

The integration of express and cors() is malfunctioning

Using JSON in JavaScript to handle the click event of ASP.NET buttons

Creating full-width divs using BootstrapLearn how to easily create full-width div

In IE8, the :last-child pseudo-class appears to be ineffective

Combining my CSS and JS files is causing code issues (works on my Mac, but not on the server)

Are your JavaScript scripts causing conflicts?

Simple method to restrict duration of video uploads using HTML5's capture attribute

Inserting a crisp white divider between items in breadcrumb navigation in the form of arrowheads

List the properties that the arguments object supports

Error message in React-router: Cannot read property 'func' of undefined, resulting in an Uncaught TypeError

Problem with Jquery show/hide feature only resolved after refreshing the page