A form is set up for editing.
Within this form, there are 2 separate divs.
The first div is labeled editForm, which displays the form for editing, and the second div is labeled infos, which shows the details of this form.
My goal is to have the infos section hidden on mobile or tablet devices and display a button to open it. Currently, the button successfully hides the infos section, but I want to add an animation to the show and hide functionality.
How can I achieve this?
HTML:
<div class="container">
<div id="editForm" class="editForm">
<form>
<div class="items">
<label>name</label>
<input>
</div>
<div class="items">
<label>name</label>
<input>
</div>
<div class="items">
<label>name</label>
<input>
</div>
<div class="items">
<label>name</label>
<input>
</div>
</form>
</div>
<div id="infos" class="infos">
<ul>
<li>first</li>
<li>second</li>
</ul>
</div>
</div>
<div id="mySidenav" class="sidenav">
<a (click)="showHideInfo()">Open</a>
</div>
CSS:
p {
font-family: Lato;
}
.container{
display: flex;
}
.editForm{
border: 1px solid red;
width: 60%;
display: flex;
justify-content: center;
}
.infos{
border: 1px solid red;
width: 40%;
display: flex;
justify-content: center;
}
@media (max-width: 768px)
{
.infos{
display: none;
width: 0;
}
.editForm{
width: 100%;
}
}
#mySidenav a {
position: fixed;
background-color: #4caf50;
right: 0px;
-webkit-transition: 0.3s;
transition: 0.3s;
top: 50%;
display: flex;
padding: 3px;
width: 39px;
text-decoration: none;
font-size: 20px;
color: white;
border-radius: 5px 0px 0px 5px;
}
#mySidenav a mat-icon{
margin-right: 10px;
margin-top: 6px;
}
#mySidenav a:hover {
right: 0;
}
#about {
top: 20px;
background-color: #4caf50;
}
This is the code that triggers the show or hide functionality for the infos section when the button is clicked:
showHideInfo(): void {
if(this.sidebarShow)
{
var editorEdit = document.getElementById('editForm');
editorEdit.style.visibility='visible';
editorEdit.style.width='100%';
var actionInfo= document.getElementById('infos');
actionInfo.style.display='none';
actionInfo.style.width='0';
this.sidebarShow=!this.sidebarShow;
} else {
var editorEdit = document.getElementById('editForm');
editorEdit.style.visibility='hidden';
editorEdit.style.width='0';
var actionInfo= document.getElementById('infos');
actionInfo.style.display='block';
actionInfo.style.width='100%';
actionInfo.style.animation="showInRight";
this.sidebarShow=!this.sidebarShow;
}
}