上下滑动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

如果您使用的是引导程序，为什么不使用它包含在boostrap JavaScript文件中的“折叠”功能。

看到这里： http : //getbootstrap.com/javascript/#collapse

不了解您如何在客户端上实现这一目标，很难仅对HTML标记提出建议。 为了方便快捷地选择，请使用Bootstrap JS包含，并添加一些额外的标签，以便为您完成绑定：)。 如果您需要额外的功能，例如单击时隐藏按钮，可以在jQuery中轻松实现。