javascript - div width adjusting to 100% if another div is hidden - Stack Overflow

admin管理员组

文章数量:1335423

How do I set the width of #leftdiv to 100% when #rightdiv is hidden, and when the button is clicked, both <div>s should be next to each other.

I already got both <div>s next to each other on the button click, but I wanted to expand #leftdiv to 100% when #rightdiv is hidden.

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>`

How do I set the width of #leftdiv to 100% when #rightdiv is hidden, and when the button is clicked, both <div>s should be next to each other.

I already got both <div>s next to each other on the button click, but I wanted to expand #leftdiv to 100% when #rightdiv is hidden.

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

Share Improve this question Follow edited Mar 18, 2020 at 16:24 Kate Orlova 3,28355 gold badges1414 silver badges3636 bronze badges asked May 15, 2015 at 0:40 DeviDevi 14111 silver badge55 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

I would just use flex box for this:

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 main reason your example did not work as you wanted is the use of float. Floating causes an element to only occupy the space needed by its content. Using float, you have to use width:100% for the left container to fix this. To make it switch dynamically from 50% to 100% width it would also be necessary to switch the style between those two in your toggle function.

With flexbox all of this is no longer necessary as its children get ordered automatically by the direction you want, in this case as a row. Setting flex: 1 1 auto; for both containers makes them grow and shrink equally to occupy all the space they can get. (flex: 1 0 auto; would also work here, as the shrinking behavior does not make any difference in this example.)

It works without manipulating the width via JavaScript if you format them as table-cells:

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>`

something like this

http://jsfiddle/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;

}

Please check following code:

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 can also check running example of this code on :

http://jsfiddle/zjea48bu/19/

本文标签： javascriptdiv width adjusting to 100 if another div is hiddenStack Overflow