向上和向下滑动 Div - Bootstrap 3

Question

我目前正在使用 Bootstrap 3 并制作 HTML 标记，但我不知道如何制作这种类型的小部件

点击“需要帮助？” 应该向下滑动并隐藏，然后在 div 下方向上滑动到它的位置......当点击十字架时，弹出窗口应该隐藏和“需要帮助？” 再次向上滑动。

下面的 HTML 标记

<div class="col-md-12 col-sm-12 col-xs-12 helpContainer no-gutter">
                            <div class="col-md-12 col-sm-12 col-xs-12 no-gutter">
                                <a href="#" class="HelpButton">Need help? <i class="fa fa-plus"></i></a>
                            </div><!-- col-md-12 -->
                            <div class="col-md-6 col-sm-6 col-xs-12 no-gutter">
                                <div class="col-md-12 col-sm-12 col-xs-12">
                                    <a href="#" class="CloseButton"><i class="fa fa-times"></i></a>
                                </div><!-- col-md-12 -->
                                <p class="HelpPopup">Not sure which service offers the greatest return on investment for your company? <a href="#">We can help</a></p>
                            </div><!-- col-md-12 -->
                        </div><!-- col-md-12 -->

请让我知道这怎么可能。

这是屏幕截图以便更好地理解

图片链接

Answer 1

如果您使用的是 bootstrap，为什么不使用它包含的 Bootstrap JavaScript 文件提供的折叠功能。

请参阅此处：http : //getbootstrap.com/javascript/#collapse

如果没有看到您如何在客户端尝试实现这一点，就很难仅对您的 HTML 标记提出建议。要获得快速简便的选项，请使用 Bootstrap JS 包含并添加一些额外的标签来为您进行绑定:)。如果您需要额外的功能，例如在单击时隐藏按钮，这可以在 jQuery 中轻松实现。