CODEWITHSUNDEEP
jquerytwitter-bootstraptwitter-bootstrap-3
Naveed Javaid
Naveed Javaid

Reputation: 451

Slide up and Slide down Div - Bootstrap 3

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

Upvotes: 1

Views: 27159

Answers (1)

CannonFodder
CannonFodder

Reputation: 332

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.

Upvotes: 5

Related Questions