Adjust div width to 100% if another div is hidden

Question

How to set the width of #leftdiv to 100% when #rightdiv is hidden and when a button is clicked, both divs should be next to each other.

I already have both divs next to each other when the button is clicked, 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>` 

Answer 1

It works without width manipulation via JavaScript if you format them as table-cell s:

 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 2

This will be what you are looking for.

what we do here says the div to be flexible and respect the content there.

this will work regardless of page width and keep them side by side, unlike float , block or inline-block .

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

 #main-content { display: table; width: 100%; table-layout: fixed; } .cell { display: table-cell; vertical-align: top; width: 100%; } #leftdiv { border: solid medium thick; background-color: #ffc; /*border: 1px solid red;*/ } #rightdiv { border: solid medium thick; background-color: #ffa; display: none; } 

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

Answer 3

something like that

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; }