JSFiddle - React, Tailwind, and code Playground

by ryleyb

HTML

<div id="fixed_height">

    <div id="form-wrapper">
    <!-- form and form element -->
    <form id="post_form">
    <input type="text"><br>
    <input type="text"><br>
    <input type="text"><br>        
    <a id="on_click_show_hidden_div" href="#">Click here</a><br>
    <div id="hidden_div_with_more_form_elements">
        This starts hidden:<input type="text"><br>
    </div>
    <input type="submit"/>
    </form>
    </div>

</div>

CSS

#fixed_height {
  height:80px;   
  border:1px black solid;
  overflow:auto;
}

#hidden_div_with_more_form_elements {
  display:none;  
}

JavaScript

$('#on_click_show_hidden_div').click(function() {
    $('#hidden_div_with_more_form_elements').toggle('slow', function(){
          $('#fixed_height').scrollTop($('#hidden_div_with_more_form_elements').position().top);
    });
    
        return false;
});