Can anyone help me out to create a javascript?

Let me explain, i have 2 divs

1) left div width 85%
2) right div width 15%

so there is what i want to change width for left div. like, if i remove or hide right div, left div width should 100% dynamically with javascrpt.

Can anyone help me out to create a javascript?

Let me explain, i have 2 divs

1) left div width 85%
2) right div width 15%

so there is what i want to change width for left div. like, if i remove or hide right div, left div width should 100% dynamically with javascrpt.

• javascript
• html
• css
• dom

• Without code in here, people don't find easy to answer your question. Create Demo – divy3993 Commented May 18, 2015 at 15:15
• you guys also can see what i am trying to do client-acumenadagency./sed – HMS Designz Commented May 18, 2015 at 15:17
• this div need to be full width if the other div hide <div id="Resize" class="content-left"></div> and the other div is <div id="button" class="navbar right"></div> – HMS Designz Commented May 18, 2015 at 15:20
• I would remend you don't do this with JavaScript. Do it with CSS instead. Only use JavaScript to set the classes. – Halcyon Commented May 18, 2015 at 15:21
• @Halcyon how can i do it with css? can you help me out plz – HMS Designz Commented May 18, 2015 at 15:26

3 Answers 3

I have done it using JavaScript:

WORKING : Demo 1

UPDATED : Demo 2

UPDATED : Demo 3 : Animate slide in/out with CSS transitions.

HTML

<div class="wrapper">
<span class="div1"></span><span class="div2"></span>

</div>
<button>Remove</button>

CSS : UPDATED

html, body {
    width:100%;
    margin:0;
}
.wrapper {
    width:100%;
    display:inline-block;
    height:auto;
    float:left;
}
.div1 {
    display:inline-block;
    width:85%;
    height:40px;
    background:#333;
}
.div2 {
    display:inline-block;
    width:15%;
    height:40px;
    background:green;
}
 /*ADDED BELOW LINES*/

 .div1, .div2
 {
  /* Change Seconds(here it's 0.5s) as per your requirement */
  -webkit-transition: all 0.5s ease-in-out; 
  -moz-transition: all 0.5s ease-in-out;
  -o-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
 }

 .addRemoveContent
 {
   width:100%;
 }

 .addRemoveMenu
 {
   width:0;
 }

JS

$("button").click(function () {
    $(".div2").hide(10);
    $(".div1").css("width", "100%");

});

JS:UPDATED - Bringing right div back

$("button").click(function () {
    $(".div2").toggleClass("addRemoveMenu");
    $(".div1").toggleClass("addRemoveContent");

});

Here is a demo for the CSS solution: http://jsfiddle/yf3e5bhv/

The advantage of this approach is that your template is declarative. You could make a plain HTML page of each state of your application. In my opinion this greatly aids development and maintenance.

HTML

<input type="button" value="toggle" id="button" /><br /><br />
<div id="left"></div><div id="right"></div>

CSS

#left, #right {
    width: 50%;
    background-color: #ff0000;
    height: 50px;
    float: left;
}
#right {
    background-color: #00ff00;
}
body.hide-right #right {
    display: none;
}
body.hide-right #left {
    width: 100%;
}

JS

var state = false;
document.getElementById("button").addEventListener("click", function () {
    var classname = "";
    if (state === false) {
        classname = "hide-right";
    }
    document.body.className = classname;
    state = !state;
});

You can significantly reduce this code if you use a library like jQuery:

$("#button").on("click", function () {
    $(document.body).toggleClass("hide-right");
});

You can do this using CSS and JavaScript. Quick and dirty way:

.dynamic {
     margin-right: 0;
}

Set your divs to have a margin-right, then use JavaScript to apply this class whenever the div is hidden.

function hideDiv(id, outerdiv) {
  document.getElementById(id).style.display = 'none'; //hide the right div
  $("#outdiv").addClass("dynamic"); //make the other div fill the space
}