Javascript css Onclick在页面底部显示div

我构建了一个简单的页面，无需向下滚动即可查看所有内容

我有一些内容要在底部显示，但我不想在一开始就显示出来

我希望用户点击一个短语就可以看到这个内容

这句话首先会放在页面的底部，然后点击后会上升一点，为现在显示的隐藏内容留出空间

如果你明白我的意思，这个内容会从下到上显示，就像一个反向下拉菜单

这是我的HTML。点击显示h3是一个短语，它会在点击四个按钮时显示隐藏内容

<div class="row text-center">

        <h3 id="click-show">Click here to see the buttons.</h3>

        <hr class="spacer">

            <div class="col-md-3 col-xs-12">
            <section> <a href="#"><button>
                        <h1>Button 1</h1>
                    </button></a> </section>
            </div>

            <div class="col-md-3 col-xs-12">
            <section> <a href="#"><button>
                        <h1>Button 2</h1>
                    </button></a> </section>
            </div>

            <div class="col-md-3 col-xs-12">
            <section> <a href="#"><button>
                        <h1>Button 3</h1>
                    </button></a> </section>
            </div>

            <div class="col-md-3 col-xs-12">
            <section> <a href="#"><button>
                        <h1>Button 4</h1>
                    </button></a> </section>
            </div>

        </div>

我是一个初学者，我真的不知道它是否可以通过使用CSS或其他语言来实现

如有任何帮助/提示，将不胜感激！谢谢大家

使用jQuery

$document.ready-函数接受回调函数，并在加载文档时触发它。 $'click-show'。单击-function接受回调函数，并在单击id为click-show的元素时触发它。 $'div.hide-show'。切换class=col-md-3 hidden的div元素，显示它。如果可见，请将其隐藏。 我在div中添加了一个类名hide show，以仅选择特定的元素

首先通过添加以下内容加载jQuery

$document.readyfunction{ $“单击显示”。单击功能{ $'div.hide-show'。切换； }; }; .隐藏表演{ 显示：无； } 单击此处查看按钮。

---

提供css代码Hi Sagar，非常感谢您的帮助。我完全按照你写的做了，但是当页面加载时，本来应该隐藏的div已经存在了。我添加了这个CSS类，但不幸的是，它没有在单击时显示。我已经像你写的那样安排好了一切。这对你有用吗？举个例子，我发现：这是完全一样的东西，但正好相反。从下到上。它基于html中标记的对齐方式