上下滑动Div-Bootstrap 3

Question

I'm currently working on Bootstrap 3 and making the HTML Markup but I don't know how to make this type of widget

On click “Need help?” should slide down and hide and below div slide up in it's place ... When the cross is clicked popup should hide and “Need help?” slide up again.

HTML Markup below

<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 -->

Please let me know how this is possible.

Here is the screenshot for better understanding

Image Link

Answer 1

If you're using bootstrap, why not use it's included Collapse functionality provided with the boostrap JavaScript files.

See here: http://getbootstrap.com/javascript/#collapse

Without seeing how you are trying to achieve this on the client side it's hard to make suggestions on just your HTML markup. For a quick and easy option, use the Bootstrap JS includes and add a few extra tags to let that do the binding for you :). If you need extra functionality such as hiding buttons when one is clicked that can be achieved quite easily in jQuery.