My sandbox on JSFIDDLE

When 'OPEN' is clicked, the content div should expand to full width, but it ended up expanding by 100px width like on the red box. I tried to set width: 100%, in the gray box div and it didn't work.

In the .content class, I had the width set to 100vw without margin: 0 auto and it expanded 100% width to the right side, not screen-fulled size.

[]

I'm testing this function before I deploy it on my website.

jQuery -

$(".openit").on("click", function() {
  $(".expandBG").toggleClass("content");
  $(".openit").hide();
  $(".closeit").show();
  $(".text").delay(500).fadeIn();
});
$(".closeit").on("click", function() {
  $(".expandBG").toggleClass("content");
  $(".openit").show();
  $(".closeit").hide();
  $(".text").hide();
});

HTML -

<div class="wrapper">


<div class="back">BG
<div class="expandBG">
  <div class="openit">OPEN</div>
  <div class="flex-col">
    <div class="closeit">CLOSE</div>

    <div class="content text" style="display: none;">
      <div>(CONTENT HERE)</div>
    </div>
  </div>
</div>
</div>


</div>

CSS -

body {
background-color: #000;
}
.wrapper {
width: 100%;
margin: 0 auto;
text-align: center;
border: solid red 1px;
}
.back {
position: relative;
color: #fff;
width: 110px;
height: 110px;
background-color: red;
margin: 0 auto;
text-align: center;
display: block;
}
.expandBG {
display: block;
width: 100px;
height: 100px;
transition: ease 0.3s;
background-color: #192D38;
overflow: hidden;
margin: 0 auto;
bottom: 0;
text-align: center;
font-family: sans-serif;
color: #fff;
position: relative;
}
.flex-col {
flex-direction: column;
}
.openit {
display: block;
text-align: center;
height: 100%;
cursor: pointer;
margin: 0 auto;
}
.closeit {
display: block;
text-align: center;
cursor: pointer;
width: 100%;
margin: 0 auto;
z-index: 1;
position: relative;
}
.text {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
margin-top: -25px;
}
.content {
width: 100%;
height: 50vw;
position: relative;
margin: 0 auto;
}