Using slideToggle to hide/show advanced options, child elements visible

Question

Problem

I've created a click function to show and hide advanced search options.

• When I click the Click to show advanced options button the select fields are visible when the div slides up, but the outer container has already been set to a fixed height and as a result this transition looks feels very abrupt.
• Looking for a better way to set the two heights so I don't need have to rely on a fixed number, height: 100% didn't seem to work

JSFiddle: https://jsfiddle.net/69jg5a4d/

scripts.js

  $(".feature__text--search").on("click", function(){
    $(".advanced__wrapper").toggleClass("is-open");

    if ($(".advanced__wrapper").hasClass("is-open")) {
      $(".header__search.search--home").css({"height": "384px", "max-height": "none"});
      $(".advanced__wrapper").slideToggle();
    } else {
      $(".advanced__wrapper").slideToggle();
      $(".header__search.search--home").css({"height": "110px", "max-height": "110px"});
    }

index.html

<div class="header__search search--home">

            <div class="header__search--simple">
                <i class="fa fa-search fa-search-home" aria-hidden="true"></i>
                <input type="text" name="" placeholder="Enter a school name" class="input--address">

                <button class="btn btn--submit">Submit</button>
            </div>

            <div class="feature__teaser--search">
                <p class="feature__text--search">Click to <span>show</span> advanced options</p>

                <div class="advanced__wrapper advanced__wrapper--home">
                            <!-- <p class="advanced__text">Advanced options</p> -->
                            <div class="advanced advanced--home">
                                <div class="advanced__third">
                                    <select class="select--type type--results">
                                        <option>All schools types</option>
                                        <option>Elementary School</option>
                                        <option>Middle School</option>
                                        <option>High School</option>
                                        <option>Technical School</option>
                                        <option>Alternative School</option>
                                    </select>
                                    <i class="fa fa-angle-down icon-dropdown" aria-hidden="true"></i>
                                </div>

                                <div class="advanced__third">
                                    <select class="select--counties counties--results">
                                        <option>All counties</option>
                                    </select>
                                    <i class="fa fa-angle-down icon-dropdown" aria-hidden="true"></i>
                                </div>

                                <div class="advanced__third">
                                    <select class="select--distance distance--results">
                                        <option>Short drive ( < 5 miles)</option>
                                        <option>Walking distance ( < 1 mile )</option>
                                    </select>
                                    <i class="fa fa-angle-down icon-dropdown" aria-hidden="true"></i>
                                </div>

                                <div class="advanced__address">
                                    <input type="text" name="" placeholder="Enter an address or ZIP code" class="input--address--extra">
                                </div>

                                <div class="checkbox__group">
                                    <div class="checkbox__inner">
                                        <input type="checkbox" name="">
                                        <label class="label--checkbox">Show schools in the St. Louis metro area</label>
                                    </div>
                                </div>
                            </div> <!-- .advanced -->
                        </div> <!-- .advanced__wrapper -->
            </div>

            <div class="header__search--advanced">
                <input type="text" name="" placeholder="Enter your address" class="input--address">

                <div class="checkbox__group">
                    <i class="fa fa-times" aria-hidden="true"></i>
                    <input type="checkbox" name="">
                    <label class="label--checkbox">Show schools in the St. Louis metro area</label>
                </div>

                <select class="select--type type--home">
                    <option>All school types</option>
                    <option>Elementary School</option>
                    <option>Middle School</option>
                    <option>High School</option>
                    <option>Technical School</option>
                    <option>Alternative School</option>
                </select>
                <i class="fa fa-angle-down icon-dropdown" aria-hidden="true"></i>

                <select class="select--counties">
                    <option>All counties</option>
                </select>
                <i class="fa fa-angle-down icon-dropdown" aria-hidden="true"></i>

                <select class="select--distance">
                    <option>Short drive ( < 5 miles)</option>
                    <option>Walking distance ( < 1 mile )</option>
                </select>
                <i class="fa fa-angle-down icon-dropdown" aria-hidden="true"></i>
            </div>
        </div>

Answer 1

I've modified your fiddle, please let me know if this is what you are looking for: https://jsfiddle.net/69jg5a4d/4/

Changes to CSS

.search--home {
  overflow: auto;
  max-height: 100vh;
}

/* modified .feature__teaser--search */
.feature__teaser--search {
   /* removed height */
}

/* modified the height of .header__search */
.header__search {
   /* removed max-height */
   height: auto;
}

Change to JS

// commented these 2 lines
//      $(".header__search.search--home").css({"height": "40vh", "max-height": "100vh"});

//      $(".header__search.search--home").css({"height": "12vh", "max-height": "100vh"});