Created
July 20, 2014 20:06
-
-
Save mattclements/d69f940db34db112e4ac to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .expand-section-title { | |
| padding: 5px; | |
| border-top: 1px #ccc solid; | |
| } | |
| .expand-section-title:first-of-type { | |
| border-top: none; | |
| } | |
| .expand-section-title a { | |
| color: #000; | |
| text-decoration: none; | |
| } | |
| .expand-section-content { | |
| display: none; | |
| padding: 5px; | |
| } | |
| .expand-section-content.active { | |
| display: block; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>JS Bin</title> | |
| <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" /> | |
| <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" /> | |
| </head> | |
| <body> | |
| <section class="expand-section"> | |
| <div class="expand-section-title active" data-expand-id="1"> | |
| <a href="#">Download Brochure</a> | |
| <i class="fa fa-minus pull-right"></i> | |
| </div> | |
| <div class="expand-section-content active" data-expander-id="1"> | |
| <a href="#" class="btn btn-primary">Download Brochure</a> | |
| </div> | |
| <div class="expand-section-title" data-expand-id="2"> | |
| <a href="#">Enquiry Form</a> | |
| <i class="fa fa-plus pull-right"></i> | |
| </div> | |
| <div class="expand-section-content" data-expander-id="2"> | |
| <form role="form"> | |
| <div class="form-group"> | |
| <label for="exampleInputEmail1">Email address</label> | |
| <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="exampleInputPassword1">Password</label> | |
| <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> | |
| </div> | |
| <button type="submit" class="btn btn-default">Submit</button> | |
| </form> | |
| </div> | |
| <div class="expand-section-title" data-expand-id="3"> | |
| <a href="#">Contact Telephone Number</a> | |
| <i class="fa fa-plus pull-right"></i> | |
| </div> | |
| <div class="expand-section-content" data-expander-id="3"> | |
| 01234567890 | |
| </div> | |
| <div class="expand-section-title" data-expand-id="4"> | |
| <a href="#">Contact Email Address</a> | |
| <i class="fa fa-plus pull-right"></i> | |
| </div> | |
| <div class="expand-section-content" data-expander-id="4"> | |
| [email protected] | |
| </div> | |
| </section> | |
| <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function(){ | |
| $('.expand-section-title,.expand-section-title *').click(function(event){ | |
| event.preventDefault(); | |
| var data_id = false; | |
| if(typeof $(this).data('expand-id') !== 'undefined') | |
| data_id = $(this).data('expand-id'); | |
| else if(typeof $(this).parent('.expand-section-title').data('expand-id') !== 'undefined') | |
| data_id = $(this).parent('.expand-section-title').data('expand-id'); | |
| if(data_id===false) | |
| return false; | |
| $('.expand-section-title:not([data-expand-id="' + data_id +'"])').removeClass('active'); | |
| $('.expand-section-title:not([data-expand-id="' + data_id +'"]) i.fa').removeClass('fa-minus').addClass('fa-plus'); | |
| $('.expand-section-content:not([data-expander-id="' + data_id +'"])').slideUp().removeClass('active'); | |
| $('.expand-section-title[data-expand-id="' + data_id +'"]').addClass('active'); | |
| $('.expand-section-content[data-expander-id="' + data_id +'"]').slideDown().addClass('active'); | |
| $('.expand-section-title[data-expand-id="' + data_id +'"] i.fa').removeClass('fa-plus').addClass('fa-minus'); | |
| }); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment