javascript – Unable to animate movement of textbox2 upwards-ThrowExceptions

Exception or error:

I have a form with 2 buttons and 2 textareas. On loading, I want to show only section1 (button, text area) and section2 button. On clicking section2 , I want to hide section1 text area, show section2 text area and gradually move it to top of the screen where section1 text area was (as it section2 text area is going upwards). On clicking section1 button, I want to hide section2 text area and show transition of section1 textarea growing downwards.

I have written the following code so far. While I am able to show/hide the two sections, I am unable to create animation.

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>
How to solve:

Is see that you are using jQuery so you can use the slideDown() and slideUp() methods.

Read more here -> slideUp You can add also options to these methods. Like duration, easing and so on

Also I made some changes to your HTML/jQ code.

Use a common class for buttons (unselected-button) and select them with jquery and then add a click function on them.

Add common class to the sections. I used .section

Then, select the section which comes after the clicked button ( when clicking on Submit1 will select section1 , same for the second or even if you have more button/sections ) and show it with slideUp()

Then select all the sections which are not the selected one ( the one selected at the previous step ) and hide them with slideDown()

var button = $('.unselected-button'); // both buttons
$(button).on('click', function() {
  var elToShow = $(this).next('.section');
  var elToHide = $('.section').not(elToShow);
  elToShow.slideDown()
  elToHide.slideUp()
})
#section2 {
  display:none
  }
<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">Section1</button>
    <div id="section1" class="section">
      <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">Section2</button>
    <div class="section" id="section2" >
      <div id="section2-div">
        <textarea id="section2-description" type="text" rows="4"> Section 2</textarea>
      </div>
    </div>
  </div>
</form>

Leave a Reply

Your email address will not be published. Required fields are marked *