CODEWITHSUNDEEP
javascripthtmlcss
Devi
Devi

Reputation: 141

div width adjusting to 100% if another div is hidden

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

Upvotes: 13

Views: 2149

Answers (4)

Artur Noetzel
Artur Noetzel

Reputation: 453

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.)

Upvotes: 2

Purvi Barot
Purvi Barot

Reputation: 269

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.net/zjea48bu/19/

Upvotes: 0

deowk
deowk

Reputation: 4318

something like this

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;

}

Upvotes: 0

TimoStaudinger
TimoStaudinger

Reputation: 42460

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

Upvotes: 0

Related Questions