Beginner coder, just learning. Training project. This hotel search form should open / close by pressing the brown button. I know that this is JS, but I can not figure out how to do it.

Help!

the form

    2 answers 2

    In short, we write the button in the html style and it will be the height of our parent and hide everything outside of it .... when we click on the button we make the height automatically

    $("button").on("click", function() { $(".item").toggleClass("visible"); }) 
     .item { width: 400px; margin: auto; border: 1px solid #ccc; overflow: hidden; height: 70px; } .it { padding: 40px 0; } .item button { display: block; width: 100%; height: 70px; border: none; } .visible { height: auto; } 
     <div class="item"> <button>Копка</button> <div class="it"> Здесь форма поиска <p>Или ещё какая то информация</p> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

      The above option is correct, but you can still do this without toggle, but simply by adding the class active, so we can get attached to this class and find out the information we need, and also beautiful, smooth animation. :)

       (function( $ ) { var object = { toggleButton: '.toggle-button', formContainer: '.container form' }; $(object.toggleButton).on('click', function() { var form = $(object.formContainer); if (form.hasClass('active')) { form.fadeOut('slow').removeClass('active'); } else { form.fadeIn('slow').addClass('active'); } }); })(jQuery); 
       html, body { margin: 0; padding: 0; } .container { width: 200px; margin: 0 auto; } .container .toggle-button { background-color: black; color: white; text-align: center; height: 50px; border-bottom: 2px solid white; } .container .toggle-button p { margin: 0; line-height: 50px; cursor: pointer; } .container form { display: flex; justify-content: center; flex-direction: column; align-items: center; background-color: black; padding: 10px; box-sizing: border-box; } .container form input:not(:first-child), .container form button { margin-top: 10px; } 
       <script src="https://code.jquery.com/jquery-1.10.2.js"></script> <div class="container"> <div class="toggle-button"> <p>Открыть/Скрыть форму</p> </div> <form> <input type="text" name="first_name"> <input type="text" name="last_name"> <button type="submit">DONE</button> </form> </div>