Created
July 20, 2014 08:12
-
-
Save mattclements/9c68e80891ddd4c8e3fa 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; | |
| } | |
| .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"> | |
| Download Brochure | |
| <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"> | |
| Enquiry Form | |
| <i class="fa fa-plus pull-right"></i> | |
| </div> | |
| <div class="expand-section-content" data-expander-id="2"> | |
| <a href="#" class="btn btn-primary">Download Brochure</a> | |
| </div> | |
| <div class="expand-section-title" data-expand-id="3"> | |
| Contact Telephone Number | |
| <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"> | |
| Contact Email Address | |
| <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