Spencer M. Spencer M. - 11 days ago 8
HTML Question

How to expand a <div> horizontally to 100% width?

I would like to be able to expand a div on click in order to make the div occupy 100% of the width. Right now, there are two videos playing side by side, and when one is clicked, I would like for it to expand to full width and minimize the other video. Here is my code, I cannot understand why this simple javascript does not do the trick:



function expandRight() {
document.getElementsByClassName('.left').setAttribute("style","width:100%");
document.getElementsByClassName('.left').style.width='100%';
}

.full-width{
width: 100%;
}

.flex{
display: -webkit-flex;
display: flex;
}

.nav{
position: absolute;
-webkit-flex-direction: column;
flex-direction: column;
height: calc(100vh - 100px);
}

.header__menu{
height: 100px;
background-color: rgba(0,0,255,0.5);
}

.nav__video{
-webkit-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
height: 100%;
cursor: pointer;
}

.left, .right {
width: 50%;
height: 100%;
transition: 0.6s ease-in-out;
}

.nav__video--left, .nav__video--right{
width: 100%;
height: 100%;
overflow: hidden;
}

video{
width: 100%;
height: 100%;
object-fit: cover;
}

<nav>
<div class="nav flex full-width">
<div class="nav__video flex full-width">
<div class="left">
<div class="nav__video--left" onclick="expandRight()">
<video playsinline autoplay muted loop>
<!--- Inlcude the video files with .webm file first --->
<source src="assets/videoLeft/loop.webm">
<source src="assets/videoLeft/loop.mp4">
<source src="assets/videoLeft/loop.mov">
</video>
</div>
</div>
<div class="right">
<div class="nav__video--right" onclick="expandLeft()">
<video playsinline autoplay muted loop>
<!--- Inlcude the video files with .webm file first --->
<source src="assets/videoRight/loop.webm">
<source src="assets/videoRight/loop.mp4">
<source src="assets/videoRight/loop.mov">
</video>
</div>
</div>
</div>
</div>
</nav>
<script src="js/scripts.js"></script>





Any help here is greatly appreciated, thanks.

Answer

Just make sure you have a correct HTML structure:

var div1 = document.getElementById("left");
var div2 = document.getElementById("right");

div1.addEventListener("click", function(e){ 
  growShrink(this, div2); 
});

div2.addEventListener("click", function(e){ 
  growShrink(this, div1); 
});


function growShrink(g, s){
  console.log(g, s);
   g.setAttribute("class", "expanded");
   s.setAttribute("class", "shrunk");
}
#wrapper { padding:0; }
div { border: 1px dashed black; }
.content { width:49.5%; float:left; margin:0;}
.expanded { width:100%; }
.shrunk { display:none;}
<div id="wrapper">
  
  <div id="left" class="content">L E F T</div>
  <div id="right" class="content">R I G H T</div>
  
</div>