Хотел бы узнать, как сделать так, чтобы при нажатии на некую кнопку(или любой другой элемент) один из двух блоков(которые находятся внутри другого) уезжал за экран, после чего второй блок занимал бы 100% ширины и вполтную к левому краю экрана появлялась линия, при нажатии на которую всё возвращалось на места. Вот что я пытался сделать. Не получается сделать так, чтобы чёрная линия "прилипла" к блоку и когда блок уезжает, она оставалась на краю экрана. Html код:
<section class="main">
<div class="open" id="open"></div>
<div class="main_projects" id="projects">
// контент
</div>
<div class="main_about" id="about">
// контент
</div>
</section>
sass:
.open
float:left
transition: 0.6s
width: 17px
height: 100%
background-color: #000
.main
display: flex
width: 100%
height: 1680px
&_projects
transition: 0.6s
padding: 53px 28px 32px 28px
margin: 0
width: 938px
height: 100%
background: #002535
&_about
padding-top: 115px
width: 100%
background: #fff
display: flex
flex-direction: column
align-items: center
.rotate
transform: translateX(-1000px)
width: 0
transition: 0.6s
Js:
document.getElementById("open").onclick = function () {
document.getElementById("projects").classList.toggle("rotate");
};