I've got a form that contains 2 buttons and 2 textareas. When the form loads, I want to display only section1 (button, textarea) and the section2 button. Upon clicking the section2 button, my aim is to hide the section1 textarea, reveal the section2 textarea, and smoothly move it upwards to the top of the screen in place of where the section1 textarea was located. When the section1 button is clicked, I want to hide the section2 textarea and show a transition where the section1 textarea grows downwards.
Although I have written some code that can show/hide the two sections, I am struggling to implement the animation aspect.
function showSection1HideOthers(event) {
var target = event.target;
console.log("will show question", target);
var elToShow = $("#section1");
var elToHide = $("#section2");
elToShow.addClass("uncollapsed");
elToShow.removeClass("collapsed");
elToHide.addClass("collapsed");
elToHide.removeClass("uncollapsed");
}
function showSection2HideOthers(event) {
var target = event.target;
console.log("will show question", target);
var elToShow = $("#section2");
var elToHide = $("#section1");
elToShow.addClass("uncollapsed");
elToShow.removeClass("collapsed");
elToHide.addClass("collapsed");
elToHide.removeClass("uncollapsed");
}.collapsed {
display: none;
animation-name: contract;
animation-duration: 4s;
}
.uncollapsed {
display: block;
animation-name: expand;
animation-duration: 4s;
}
@keyframes expand {
0% {
display: none;
height: 0%;
opacity: 1;
}
100% {
display: block;
height: 100%;
opacity: 0;
}
}
@keyframes contract {
0% {
display: block;
height: 100%;
opacity: 0;
}
100% {
display: none;
height: 0%;
opacity: 1;
}
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="new-form" onSubmit="addPracticeQuestion()" novalidate>
<div>
<!-- label and small in same line. select in a new line, thus enclosed select in a div-->
<button type="button" class="unselected-button" id="section1-collapsable-button" onclick="showSection1HideOthers(event)">Section1</button>
<div id="section1">
<div class="section1-div" id="description-div">
<textarea id="section1-description" type="text" rows="4">Section 1</textarea>
</div>
</div>
<!-- transition to this only after the question has been filled correctly-->
<button type="button" class="unselected-button" id="section2-collapsable-button" onclick="showSection2HideOthers(event)">Section2</button>
<div class="collapsed" id="section2">
<div id="section2-div">
<textarea id="section2-description" type="text" rows="4"> Section 2</textarea>
</div>
</div>
</div>
</form>