I am working on a layout where I have two divs placed side by side within a parent div. The left div will have text content, while the right div will contain an image. I want to implement functionality where on button click, the right div can expand or reduce back to its original width.
<style>
.parent{
width: 100%;
border: 1px solid blue;
padding: 2px;
float: left;
}
.left{
width: 60%;
float: left;
border: 1px solid red;
}
.right{
width: 38%;
border: 1px solid orange;
float: right;
}
</style>
<input type="submit" class="toggle_div" id="button1" value="Expand"/><br>
<div class="parent">
<div class="left">Left Content</div>
<div class="right">Right Content</div>
</div>
To achieve this expansion/reduction effect, here is the JavaScript code:
$("#button1").click(function(){
var inputValue=$("#button1").attr('value');
if(inputValue=="Expand")
{
$(".right").animate({width:"60%"});
$("#button1").attr('value','Reduce');
}
else if(inputValue=="Reduce")
{
$(".right").animate({width:"38%"});
$("#button1").attr('value','Expand');
}
});
Currently, when expanding the right div, it goes underneath the left div. My goal is for the left div to adjust its width accordingly, taking up the remaining space within the parent so that both divs stay side by side.
You can view and interact with the layout on JSFiddle.
I believe there might be a CSS solution to handle the resizing of the left div without relying entirely on JavaScript. Any suggestions or tips would be greatly appreciated!