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/][1]
[1]: https://jsfiddle.net/zjea48bu/19/
It works without manipulating the width via JavaScript if you format them as `table-cell`s:
<!-- begin snippet: js hide: false -->
<!-- language: lang-js -->
function toggleSideBar() {
var div = document.getElementById('rightdiv');
if (div.style.display !== 'none') {
div.style.display = 'none';
} else {
div.style.display = 'table-cell';
}
};
<!-- language: lang-css -->
#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%;
}
<!-- language: lang-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>`
<!-- end snippet -->
