如何打开具有下拉效果的菜单？

Question

I have a script menu on Filter by button.Now, when I press button, the menu is opened horizontal.But I want to open it with an effect like drop down menu. How can I be able to give a dropdown effect for this? I want w down effect at click, not hover. Because I have 3 fields and, at click on Filter by I want to have a dropdown menu.Can I add something like this in JavaScript?

 $(".search-button").click(function(){ $(".search-event").toggle(1000); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="#" style="font-size: 14px; float: right; color: #555" class="search-button" type="button" style="float: right; margin-left: 10px">Filter by <i class="fa fa-angle-down"></i></a>

            <div class="search-event" style="display:none">
                {!! Form::open(['class' => 'sky-form','url' => 'view-all-event','id' => 'sky-form4','method' => 'GET','style' => 'border:none']) !!}

                <div class="input-group">
                    <div class="row">
                        <div class="col col-3">
                            <label class="select">
                                <select name="category">
                                <option value="">Topic</option>
                                @foreach($parent_category as $parent)
                                  <optgroup label="{{ $parent->category }}">
                                    @foreach($child_category as $child)
                                        @if($parent->id == $child->parent_id)
                                        <option value="{{ $child->category_url }}" <?php if($category == $child->category_url ){ echo "selected"; } ?>>{{ $child->category }}</option>
                                        @endif
                                    @endforeach

                                  </optgroup>
                                  @endforeach

                                </select>
                                <i></i>
                            </label>
                        </div>

                        <div class="col col-3">
                            <label class="select">
                                <select name="event_type">
                                <option value="">Event type</option>
                                @foreach($evnetTypeList as $evnettype)
                                    <option value="{{ $evnettype->id }}_{{ Slugify::slugify($evnettype->event_type) }}" <?php if($event_type == $evnettype->id.'_'.Slugify::slugify($evnettype->event_type)){ echo "selected"; } ?>>{{ $evnettype->event_type }}</option>
                                    @endforeach
                                </select>

                                <i></i>
                            </label>
                        </div>
                        <div class="col col-3">
                            <label class="select">
                                {!! Form::select('country',$countryList,$country) !!}
                                <i></i>
                            </label>
                        </div>

                        <div class="col col-3">
                            <label class="input">
                                <i class="icon-append fa fa-calendar"></i>
                                <input type="text" name="starting_date" id="date" value="{{ $starting_date }}">
                            </label>
                        </div>


                    </div>


                        <span class="input-group-btn" style="vertical-align:top">
                            <button class="btn-u" type="submit"><i class="fa fa-search"></i></button>
                            <!-- {!! Form::submit('Save Changes' ,['class' => 'btn-u']) !!} -->
                        </span>


                </div>

Answer 1

You can use transition in combination with opacity to create this effect in css.

.stuffToAnimate{
   ...
   opacity: 0;
   transition: all .5s ease;
   ...
}

and when the toggle event is raised you can set the opacity to 1 and your menu will ease to full visibility.