I noticed this nice style from a control vendor and have recreated the accordion in a similar style.
Demo:
If the animation is struggling in the iframe above check out the demo in a new page:
http://stevenhollidge.com/blog-source-code/accordionCode:
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 lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Example of Twitter Bootstrap 3 Accordion</title> | |
| <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> | |
| <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> | |
| <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> | |
| <style type="text/css"> | |
| .bs-example { | |
| margin: 20px; | |
| } | |
| /* progress bar */ | |
| .progress { | |
| border-radius: 0px; | |
| height: 15px; | |
| } | |
| .progress-bar { | |
| background-image: linear-gradient(to bottom,#428bca 0,#0072C6 100%); | |
| box-shadow: none; | |
| } | |
| /* end progress bar */ | |
| /* accordion styles */ | |
| .panel-group .panel { | |
| border-radius: 0; | |
| } | |
| .panel-default>.panel-heading { | |
| border-top-left-radius: 0px; | |
| border-top-right-radius: 0px; | |
| color: #828282; | |
| background-image: -webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#e8e8e8)); | |
| cursor: pointer; | |
| } | |
| .panel-group .panel+.panel { | |
| margin-top: -1px; | |
| } | |
| .panel-default>.panel-heading.active-panel { | |
| background-image: linear-gradient(to bottom,#428bca 0,#0072C6 100%); | |
| color: #DFEFF9; | |
| } | |
| h4 { | |
| font-weight: 700; | |
| } | |
| .panel-body { | |
| height: 200px; | |
| } | |
| /* end accordion style */ | |
| </style> | |
| </head> | |
| <body> | |
| <div class="bs-example"> | |
| <div class="progress"> | |
| <div id="progress-bar" class="progress-bar" role="progressbar" style="width: 10%;"></div> | |
| </div> | |
| <div class="panel-group" id="accordion" class="accordion"> | |
| <div class="panel panel-default"> | |
| <div id="panelHeader1" class="panel-heading active-panel" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne"> | |
| <h4 class="panel-title"> | |
| <span>PERSONAL INFORMATION</span> | |
| </h4> | |
| </div> | |
| <div id="collapseOne" class="panel-collapse collapse in"> | |
| <div class="panel-body"> | |
| <p>Text goes here...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="panel panel-default"> | |
| <div id="panelHeader2" class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> | |
| <h4 class="panel-title"> | |
| <span>SKILLS & QUALIFICATIONS</span> | |
| </h4> | |
| </div> | |
| <div id="collapseTwo" class="panel-collapse collapse"> | |
| <div class="panel-body"> | |
| <p>Text goes here...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="panel panel-default"> | |
| <div id="panelHeader3" class="panel-heading" data-toggle="collapse" data-parent="#accordion" href="#collapseThree"> | |
| <h4 class="panel-title"> | |
| <span>CAREER PROFILE</span> | |
| </h4> | |
| </div> | |
| <div id="collapseThree" class="panel-collapse collapse"> | |
| <div class="panel-body"> | |
| <p>Text goes here...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| $(document).ready(function() { | |
| $('#accordion > .panel').on('show.bs.collapse', function (e) { | |
| var heading = $(this).find('.panel-heading'); | |
| heading.addClass("active-panel"); | |
| setProgressBar(heading.get(0).id); | |
| }); | |
| $('#accordion > .panel').on('hidden.bs.collapse', function (e) { | |
| var heading = $(this).find('.panel-heading'); | |
| heading.removeClass("active-panel"); | |
| //setProgressBar(heading.get(0).id); | |
| }) | |
| function setProgressBar(id) { | |
| var progressBar = document.getElementById("progress-bar"); | |
| switch(id) { | |
| case "panelHeader1": | |
| progressBar.setAttribute("style","width:10%"); | |
| break; | |
| case "panelHeader2": | |
| progressBar.setAttribute("style","width:50%"); | |
| break; | |
| default: | |
| progressBar.setAttribute("style","width:100%"); | |
| } | |
| } | |
| }); | |
| </script> | |
| </body> | |
| </html> |
No comments:
Post a Comment