Bootstrap Snippet Resume-best-version using HTML CSS Bootstrap Javascript

/*ie.cssfirefox.cssopera.csschrome.css*/ /* NORMALIZATION */ /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */ /* 1. Correct the line height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. */ html {line-height: 1;/* 1 */ -webkit-text-size-adjust: 100%;/* 2 */} /* Sections ====== */ /* Remove the margin in all browsers.*/ body {margin: 0;} /* Correct the font size and margin on `h1` elements within `section` and article` contexts in Chrome, Firefox, and Safari. */ h1 {font-size: 2em;margin: 0.67em 0;} /* Grouping content ====================== */ /* 1. Add the correct box sizing in Firefox. 2. Show the overflow in Edge and IE. */ hr {-webkit-box-sizing: content-box; box-sizing: content-box;/* 1 */ height: 0;/* 1 */ overflow: visible;/* 2 */} /* 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */ pre {font-family: monospace, monospace;/* 1 */ font-size: 1em;/* 2 */} /* Text-level semantics ======================= */ /* Remove the gray background on active links in IE 10. */ a {background-color: transparent;} /* 1. Remove the bottom border in Chrome 57- 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none;/* 1 */ text-decoration: underline;/* 2 */ -webkit-text-decoration: underline dotted;text-decoration: underline dotted;/* 2 */} /* Add the correct font weight in Chrome, Edge, and Safari. */ b, strong {font-weight: bolder;} /* 1. Correct the inheritance and scaling of font size in all browsers. 2. Correct the odd `em` font sizing in all browsers. */ code,kbd,samp {font-family: monospace, monospace;/* 1 */ font-size: 1em;/* 2 */} /* Add the correct font size in all browsers. */ small {font-size: 80%;} /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub,sup { font-size: 75%;line-height: 0;position: relative;vertical-align: baseline;} sub {bottom: -0.25em;} sup {top: -0.5em;} /* Embedded content========================= */ /* Remove the border on images inside links in IE 10. */ img {border-style: none;} /* Forms=================== */ /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. */ button,input,optgroup,select,textarea { font-family: inherit;/* 1 */ font-size: 100%;/* 1 */ line-height: 1.15;/* 1 */ margin: 0;/* 2 */} /* Show the overflow in IE. 1. Show the overflow in Edge. */ button,input { /* 1 */overflow: visible;} /* Remove the inheritance of text transform in Edge, Firefox, and IE. 1. Remove the inheritance of text transform in Firefox. */ button,select { /* 1 */text-transform: none;} /* Correct the inability to style clickable types in iOS and Safari. */ button,[type="button"],[type="reset"],[type="submit"] {-webkit-appearance: button;} /* Remove the inner border and padding in Firefox. */ button::-moz-focus-inner,[type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner {border-style: none;padding: 0;} /* Restore the focus styles unset by the previous rule. */ button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring {outline: 1px dotted ButtonText;} /* Correct the padding in Firefox. */ fieldset {padding: 0.35em 0.75em 0.625em;} /* 1. Correct the text wrapping in Edge and IE. 2. Correct the color inheritance from `fieldset` elements in IE. 3. Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */ legend {-webkit-box-sizing: border-box;box-sizing: border-box;/* 1 */ color: inherit;/* 2 */ display: table;/* 1 */ max-width: 100%;/* 1 */ padding: 0;/* 3 */ white-space: normal;/* 1 */} /* Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress {vertical-align: baseline;} /* Remove the default vertical scrollbar in IE 10+. */ textarea {overflow: auto;} /* 1. Add the correct box sizing in IE 10. 2. Remove the padding in IE 10. */ [type="checkbox"],[type="radio"] {-webkit-box-sizing: border-box;box-sizing: border-box;/* 1 */ padding: 0;/* 2 */} /* * Correct the cursor style of increment and decrement buttons in Chrome. */ [type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button {height: auto;} /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type="search"] {-webkit-appearance: textfield;/* 1 */ outline-offset: -2px;/* 2 */} /* * Remove the inner padding in Chrome and Safari on macOS. */ [type="search"]::-webkit-search-decoration {-webkit-appearance: none;} /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button {-webkit-appearance: button;/* 1 */ font: inherit;/* 2 */} /* Interactive==================== */ /* Add the correct display in Edge, IE 10+, and Firefox. */ details {display: block;} /* Add the correct display in all browsers. */ summary {display: list-item;} /* Misc ================ */ /* Add the correct display in IE 10+. */ template {display: none;} /* Add the correct display in IE 10. */ [hidden] {display: none;} *,*:before,*:after {-webkit-box-sizing: border-box;box-sizing: border-box;} /* Font Definitions */ header.smaller tagline1 {display: none;} header tagline1 {display: block;} header.smaller tagline2 {display: block;} header tagline2 {display: none;} p.company {margin: 4pt 0in 4pt;line-height: normal;vertical-align: baseline;} p.job {text-align: justify;line-height: normal;margin-bottom: 0pt;vertical-align: baseline;-ms-text-justify: inter-ideograph;} p.job.d-flex.justify-content-between {text-align: justify;line-height: normal;margin-bottom: 0pt;-ms-text-justify: inter-ideograph;} p.main-top {margin: 6pt 56.45pt 4pt 6.65pt;line-height: 125%;} p.main-middle {margin: 2pt 56.45pt 4pt 6.65pt;line-height: 125%;} p.main-bottom {margin: 2pt 56.45pt 6pt 6.65pt;line-height: 125%;} p.main-solo { margin: 6pt 56pt 6pt 6.65pt;line-height: 125%;} p.subheading {margin: 2pt 0in 0in;line-height: normal;} p.summary-top {text-align: left;font-family: georgia, sans serif;font-size: 14pt;padding: 5px 10px 5px 10px;margin: 6pt 5.35pt 6pt 2.55pt;text-align: justify;line-height: 115%;-ms-text-justify: inter-ideograph;} p.summary-middle {text-align: left;font-family: georgia, sans serif;font-size: 14pt;padding: 5px 10px 5px 10px;margin: 0in 5.35pt 6pt 2.55pt;text-align: justify;line-height: 115%;-ms-text-justify: inter-ideograph;} p.summary-bottom {text-align: left;font-family: georgia, sans serif;font-size: 14pt;padding: 5px 10px 5px 10px;margin: 0in 5.35pt 6pt 2.55pt;text-align: justify;line-height: 115%;-ms-text-justify: inter-ideograph;} span.heading {font-family: Baskerville Old Face;font-weight: bold;font-size: 16pt;} span.summary {line-height: 115%;font-family: Calibri, sans-serif;font-size: 14pt;} span.summaryb {line-height: 115%;font-family: Calibri, sans-serif;font-size: 14pt;} span.subheading {font-family: Georgia, serif;font-size: 15pt;} span.company {font-weight: bold;color: #1d1dff;font-family: Georgia, serif;font-size: 13.5pt;} span.job {color: black;font-size: 11pt;font-family: Georgia, serif;font-weight: bold;text-align: left;} span.date {font-family: Georgia, serif;text-align: right;} span.quote {font-style: italic;font-family: cursive;font-size: 13pt;color: darkred;} span.years {font-family: Georgia, serif;font-size: 10pt;} small.pull-right {text-align: right;font-family: georgia;font-style: normal;font-size: 11pt;} span.acc {font-family: Calibri, sans-serif;font-size: 12pt;} span.table {color: black;line-height: 115%;font-size: 11.5pt;} span.edu-left {color: black;text-transform: none;line-height: 115%;font-family: Arial, sans-serif;font-size: 10.5pt;font-weight: normal;text-align: right;} span.edu-dt {color: black;text-transform: none;font-family: Arial, sans-serif;font-size: 10pt;} span.edu-dd {color: black;text-transform: none;font-family: Arial, sans-serif;font-size: 10pt;font-weight: normal;} span.skills-dt {color: black;font-family: Arial, sans-serif;font-size: 10.5pt;} span.skills-dd {color: black;font-family: Arial, sans-serif;font-size: 10.5pt;font-weight: normal;} span.skills-right {color: black;line-height: 105%;font-family: Arial, sans-serif;font-size: 11.5pt;font-weight: normal;} span.text-left {color: black;line-height: 105%;font-family: Arial, sans-serif;font-size: 11.5pt;font-weight: normal;} span.text-right {color: black;line-height: 105%;font-weight: bold;font-family: Arial, sans-serif;font-size: 11.5pt;font-weight: normal;} .row-heading {text-align: justify;line-height: 108.33%;margin: 0px;font-family: Georgia;font-size: 18px;background-color: blue;font-weight: bold;color: white;padding: 0px;} .row-main {height: auto; border-top: 1px solid #1d1dff; border-right: 1px solid #1d1dff;} .row-skills-first {padding: 4pt 0pt 2pt 0pt;} .row-skills-middle {padding: 2pt 0pt 2pt 0pt;} .row-skills-last {padding: 2pt 0pt 4pt 0pt;} .summary-acc {font-size: 14pt;padding: 5px;font-weight: bold;} .company {text-align: left; padding: 0in 5.75pt;height: auto;} .heading {overflow: hidden;background: #3333ff;padding: 0pt;} .main {border-top: 1px solid blue;border-right: 1px solid blue;} .col-12.summary {background: white;border-width: 1pt medium medium;border-style: solid none none;border-color: #0708dd currentColor currentColor;padding: 0in 5.75pt;-o-border-image: none;-webkit-border-image: none;border-image: none;height: auto;} .col-12.subheading {padding: 0in 5.75pt;border: 1pt solid #3333ff;-o-border-image: none;-webkit-border-image: none;border-image: none;width: 534.1pt;height: 16.85pt;} .col-12.skills {background: white;border-width: 1pt;border-style: solid;border-color: #0708dd #3333ff #0708dd #0708dd;padding: 0in 5.75pt;-o-border-image: none;-webkit-border-image: none;border-image: none;width: 534.1pt;height: 95.55pt;} .col-12.company {padding: 0in 5.75pt;height: auto;} .col-12.main {margin-top: 5px; padding: 0in 5.75pt;height: auto;} .col-12.job {padding: 0in 5.75pt;} .col-12 {-webkit-box-flex: 0;-ms-flex: 0 0 100%;flex: 0 0 100%;max-width: 100%;} .video {position: relative;padding-bottom: 56.25%;height: 0;overflow: hidden;} .video iframe,.video object,.video embed {position: absolute;top: 0;left: 0;width: 100%;height: 100%;} img {width: auto;height: 100%;} header nav a:hover {color: white;} header {width: 100%;height: 136px;overflow: hidden;position: fixed;top: 0;left: 0;z-index: 999;background-color: #000000;-webkit-transition: height 0.3s;-o-transition: height 0.3s;transition: height 0.3s;} header.smaller {height: 75px;} header span#logo {display: inline-block;height: 110px;line-height: 110px;float: left;-webkit-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;margin-bottom: -20px;} header.smaller span#logo {width: auto;height: 75px;margin-bottom: 0px;padding-left: 20px;} header.smaller .tcb-quote-carousel {display: none !important;} span.subtext {color: black;margin-top: -20px;} /* shrinking nav */ header nav a {line-height: 150px;margin-left: 20px;color: #ffffff;font-weight: 700;font-size: 18px;-webkit-transition: all 0.3s;-o-transition: all 0.3s;transition: all 0.3s;} header.smaller nav a {line-height: 75px;} td {margin: 4px;} .row-heading {line-height: 108.33%;font-family: Georgia;font-size: 18px;background-color: blue;font-weight: bold;color: white;border-top: 1px double white;border-bottom: 1px double white;} span.heading {vertical-align: baseline;} span.summary {font-size: 14pt;} span.subtext,strong.logo-subtitle {font-size: 14pt;vertical-align: top;} span.summary-acc {font-size: 12.5pt;font-weight: bold;} p.heading {margin-top: 10px;vertical-align: middle;} p.summary {margin-left: 10px;} .tcb-quote-carousel {background: #f9f9f9;padding-top: 0px;margin: 0px 25px 0px 25px;} .tcb-quote-carousel .quote {color: rgba(100, 0, 0, 0.5);text-align: center;margin-bottom: 0px;} .tcb-quote-carousel .carousel {padding-top: 10px;padding-bottom: 0px;} .tcb-quote-carousel .carousel .carousel-indicators > li {background-color: #e84a64;border: none;} .tcb-quote-carousel blockquote {margin-top: 0px;text-align: center;border: none;} .carousel-fade .carousel-inner .item {-webkit-transition-property: opacity;-o-transition-property: opacity;transition-property: opacity;} .carousel-fade .carousel-inner .item,.carousel-fade .carousel-inner .active.left, .carousel-fade .carousel-inner .active.right {opacity: 0;} .carousel-fade .carousel-inner .active,.carousel-fade .carousel-inner .next.left, .carousel-fade .carousel-inner .prev.right {opacity: 1;} .carousel-fade .carousel-inner .next,.carousel-fade .carousel-inner .prev, .carousel-fade .carousel-inner .active.left,.carousel-fade .carousel-inner .active.right {left: 0;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);} ol.carousel-indicators {display: none;} blockquote {text-align: right;} .quoter {text-align: center;} header.smaller .tcb-quote-carousel {display: none !important;}header ul.nav {color: black;} .navbar-default {background-color: #f8f8f8;border-color: #e7e7e7;} h2 {line-height:100%;} .Accordion {border-left: solid 1px gray; border-right: solid 1px black; border-bottom: solid 1px gray; overflow: hidden;} .AccordionPanel {margin: 0px; padding: 0px;} .AccordionPanelTab {background-color: #CCCCCC;border-top: solid 1px black;border-bottom: solid 1px gray; margin: 0px; padding: 2px; cursor: pointer; -moz-user-select: none; -khtml-user-select: none;} .AccordionPanelContent {overflow: auto; margin: 0px; padding: 0px; height: 200px;} .AccordionPanelOpen .AccordionPanelTab { background-color: #EEEEEE;} /* CAROUSEL2 LOGO SLIDER *//* Slider */ /* Slider */ .slick-slide {margin: 0px 20px;} .slick-slide img {width: auto; max-height: 91px;} .slick-slider {position: relative; display: block; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; -khtml-user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;} .slick-list {position: relative; display: block; overflow: hidden; margin: 0; padding: 0;} .slick-list:focus {outline: none;} .slick-list.dragging {cursor: pointer;} .slick-slider .slick-track, .slick-slider .slick-list {-ms-transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} .slick-track {position: relative; top: 0; left: 0; display: block;} .slick-slide {display: none; float: left; height: 100%; min-height: 1px;} [dir='rtl'] .slick-slide {float: right;} .slick-slide img {display: block;} .slick-slide.slick-loading img {display: none;} .slick-initialized .slick-slide {display: block;} .slick-loading .slick-slide {visibility: hidden;}

/*! * classie v1.0.0 */ /*jshint browser: true, strict: true, undef: true, unused: true */ /*global define: false */ ( function( window ) {'use strict'; // class helper functions from bonzo https://github.com/ded/bonzo function classReg( className ) {return new RegExp("(^|\\s+)" + className + "(\\s+|$)");} // classList support for class management // altho to be fair, the api sucks because it won't accept multiple classes at once var hasClass, addClass, removeClass; if ( 'classList' in document.documentElement ) { hasClass = function( elem, c ) {return elem.classList.contains( c );}; addClass = function( elem, c ) {elem.classList.add( c );}; removeClass = function( elem, c ) {elem.classList.remove( c );}; } else {hasClass = function( elem, c ) {return classReg( c ).test( elem.className );}; addClass = function( elem, c ) {if ( !hasClass( elem, c ) ) {elem.className = elem.className + ' ' + c;} }; removeClass = function( elem, c ) {elem.className = elem.className.replace( classReg( c ), ' ' );}; } function toggleClass( elem, c ) {var fn = hasClass( elem, c ) ? removeClass : addClass; fn( elem, c );} var classie = { /* full names*/ hasClass: hasClass, addClass: addClass, removeClass: removeClass, toggleClass: toggleClass, /* short names*/ has: hasClass, add: addClass, remove: removeClass, toggle: toggleClass}; // transport if ( typeof define === 'function' && define.amd ) { /* AMD */ define( classie );} else {/* browser global */ window.classie = classie;} })( window ); // SpryAccordion.js - version 0.15 - Spry Pre-Release 1.6.1 // // Copyright (c) 2006. Adobe Systems Incorporated. // All rights reserved. // // Redistribution and use in source and binary forms, with or without // modification, are permitted provided that the following conditions are met: // // * Redistributions of source code must retain the above copyright notice, // this list of conditions and the following disclaimer. // * Redistributions in binary form must reproduce the above copyright notice, // this list of conditions and the following disclaimer in the documentation // and/or other materials provided with the distribution. // * Neither the name of Adobe Systems Incorporated nor the names of its // contributors may be used to endorse or promote products derived from this // software without specific prior written permission. // // THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" // AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE // IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE // ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE // LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR // CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF // SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS // INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN // CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) // ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE // POSSIBILITY OF SUCH DAMAGE. var Spry; if (!Spry) Spry = {}; if (!Spry.Widget) Spry.Widget = {}; Spry.Widget.Accordion = function(element, opts) { this.element = this.getElement(element); this.defaultPanel = 0; this.hoverClass = "AccordionPanelTabHover"; this.openClass = "AccordionPanelOpen"; this.closedClass = "AccordionPanelClosed"; this.focusedClass = "AccordionFocused"; this.enableAnimation = true; this.enableKeyboardNavigation = true; this.currentPanel = null; this.animator = null; this.hasFocus = null; this.previousPanelKeyCode = Spry.Widget.Accordion.KEY_UP; this.nextPanelKeyCode = Spry.Widget.Accordion.KEY_DOWN; this.useFixedPanelHeights = true; this.fixedPanelHeight = 0; Spry.Widget.Accordion.setOptions(this, opts, true); this.attachBehaviors(); }; Spry.Widget.Accordion.prototype.getElement = function(ele) { if (ele && typeof ele == "string") return document.getElementById(ele); return ele; }; Spry.Widget.Accordion.prototype.addClassName = function(ele, className) { if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1)) return; ele.className += (ele.className ? " " : "") + className; }; Spry.Widget.Accordion.prototype.removeClassName = function(ele, className) { if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1)) return; ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), ""); }; Spry.Widget.Accordion.setOptions = function(obj, optionsObj, ignoreUndefinedProps) { if (!optionsObj) return; for (var optionName in optionsObj) { if (ignoreUndefinedProps && optionsObj[optionName] == undefined) continue; obj[optionName] = optionsObj[optionName]; } }; Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(e, panel) { if (panel) this.addClassName(this.getPanelTab(panel), this.hoverClass); return false; }; Spry.Widget.Accordion.prototype.onPanelTabMouseOut = function(e, panel) { if (panel) this.removeClassName(this.getPanelTab(panel), this.hoverClass); return false; }; Spry.Widget.Accordion.prototype.openPanel = function(elementOrIndex) { var panelA = this.currentPanel; var panelB; if (typeof elementOrIndex == "number") panelB = this.getPanels()[elementOrIndex]; else panelB = this.getElement(elementOrIndex); if (!panelB || panelA == panelB) return null; var contentA = panelA ? this.getPanelContent(panelA) : null; var contentB = this.getPanelContent(panelB); if (!contentB) return null; if (this.useFixedPanelHeights && !this.fixedPanelHeight) this.fixedPanelHeight = (contentA.offsetHeight) ? contentA.offsetHeight : contentA.scrollHeight; if (this.enableAnimation) { if (this.animator) this.animator.stop(); this.animator = new Spry.Widget.Accordion.PanelAnimator(this, panelB, { duration: this.duration, fps: this.fps, transition: this.transition }); this.animator.start(); } else { if(contentA) { contentA.style.display = "none"; contentA.style.height = "0px"; } contentB.style.display = "block"; contentB.style.height = this.useFixedPanelHeights ? this.fixedPanelHeight + "px" : "auto"; } if(panelA) { this.removeClassName(panelA, this.openClass); this.addClassName(panelA, this.closedClass); } this.removeClassName(panelB, this.closedClass); this.addClassName(panelB, this.openClass); this.currentPanel = panelB; return panelB; }; Spry.Widget.Accordion.prototype.closePanel = function() { // The accordion can only ever have one panel open at any // give time, so this method only closes the current panel. // If the accordion is in fixed panel heights mode, this // method does nothing. if (!this.useFixedPanelHeights && this.currentPanel) { var panel = this.currentPanel; var content = this.getPanelContent(panel); if (content) { if (this.enableAnimation) { if (this.animator) this.animator.stop(); this.animator = new Spry.Widget.Accordion.PanelAnimator(this, null, { duration: this.duration, fps: this.fps, transition: this.transition }); this.animator.start(); } else { content.style.display = "none"; content.style.height = "0px"; } } this.removeClassName(panel, this.openClass); this.addClassName(panel, this.closedClass); this.currentPanel = null; } }; Spry.Widget.Accordion.prototype.openNextPanel = function() { return this.openPanel(this.getCurrentPanelIndex() + 1); }; Spry.Widget.Accordion.prototype.openPreviousPanel = function() { return this.openPanel(this.getCurrentPanelIndex() - 1); }; Spry.Widget.Accordion.prototype.openFirstPanel = function() { return this.openPanel(0); }; Spry.Widget.Accordion.prototype.openLastPanel = function() { var panels = this.getPanels(); return this.openPanel(panels[panels.length - 1]); }; Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel) { if (panel != this.currentPanel) this.openPanel(panel); else this.closePanel(); if (this.enableKeyboardNavigation) this.focus(); if (e.preventDefault) e.preventDefault(); else e.returnValue = false; if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; return false; }; Spry.Widget.Accordion.prototype.onFocus = function(e) { this.hasFocus = true; this.addClassName(this.element, this.focusedClass); return false; }; Spry.Widget.Accordion.prototype.onBlur = function(e) { this.hasFocus = false; this.removeClassName(this.element, this.focusedClass); return false; }; Spry.Widget.Accordion.KEY_UP = 38; Spry.Widget.Accordion.KEY_DOWN = 40; Spry.Widget.Accordion.prototype.onKeyDown = function(e) { var key = e.keyCode; if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode)) return true; var panels = this.getPanels(); if (!panels || panels.length < 1) return false; var currentPanel = this.currentPanel ? this.currentPanel : panels[0]; var nextPanel = (key == this.nextPanelKeyCode) ? currentPanel.nextSibling : currentPanel.previousSibling; while (nextPanel) { if (nextPanel.nodeType == 1 /* Node.ELEMENT_NODE */) break; nextPanel = (key == this.nextPanelKeyCode) ? nextPanel.nextSibling : nextPanel.previousSibling; } if (nextPanel && currentPanel != nextPanel) this.openPanel(nextPanel); if (e.preventDefault) e.preventDefault(); else e.returnValue = false; if (e.stopPropagation) e.stopPropagation(); else e.cancelBubble = true; return false; }; Spry.Widget.Accordion.prototype.attachPanelHandlers = function(panel) { if (!panel) return; var tab = this.getPanelTab(panel); if (tab) { var self = this; Spry.Widget.Accordion.addEventListener(tab, "click", function(e) { return self.onPanelTabClick(e, panel); }, false); Spry.Widget.Accordion.addEventListener(tab, "mouseover", function(e) { return self.onPanelTabMouseOver(e, panel); }, false); Spry.Widget.Accordion.addEventListener(tab, "mouseout", function(e) { return self.onPanelTabMouseOut(e, panel); }, false); } }; Spry.Widget.Accordion.addEventListener = function(element, eventType, handler, capture) { try { if (element.addEventListener) element.addEventListener(eventType, handler, capture); else if (element.attachEvent) element.attachEvent("on" + eventType, handler); } catch (e) {} }; Spry.Widget.Accordion.prototype.initPanel = function(panel, isDefault) { var content = this.getPanelContent(panel); if (isDefault) { this.currentPanel = panel; this.removeClassName(panel, this.closedClass); this.addClassName(panel, this.openClass); // Attempt to set up the height of the default panel. We don't want to // do any dynamic panel height calculations here because our accordion // or one of its parent containers may be display:none. if (content) { if (this.useFixedPanelHeights) { // We are in fixed panel height mode and the user passed in // a panel height for us to use. if (this.fixedPanelHeight) content.style.height = this.fixedPanelHeight + "px"; } else { // We are in variable panel height mode, but since we can't // calculate the panel height here, we just set the height to // auto so that it expands to show all of its content. content.style.height = "auto"; } } } else { this.removeClassName(panel, this.openClass); this.addClassName(panel, this.closedClass); if (content) { content.style.height = "0px"; content.style.display = "none"; } } this.attachPanelHandlers(panel); }; Spry.Widget.Accordion.prototype.attachBehaviors = function() { var panels = this.getPanels(); for (var i = 0; i < panels.length; i++) this.initPanel(panels[i], i == this.defaultPanel); // Advanced keyboard navigation requires the tabindex attribute // on the top-level element. this.enableKeyboardNavigation = (this.enableKeyboardNavigation && this.element.attributes.getNamedItem("tabindex")); if (this.enableKeyboardNavigation) { var self = this; Spry.Widget.Accordion.addEventListener(this.element, "focus", function(e) { return self.onFocus(e); }, false); Spry.Widget.Accordion.addEventListener(this.element, "blur", function(e) { return self.onBlur(e); }, false); Spry.Widget.Accordion.addEventListener(this.element, "keydown", function(e) { return self.onKeyDown(e); }, false); } }; Spry.Widget.Accordion.prototype.getPanels = function() { return this.getElementChildren(this.element); }; Spry.Widget.Accordion.prototype.getCurrentPanel = function() { return this.currentPanel; }; Spry.Widget.Accordion.prototype.getPanelIndex = function(panel) { var panels = this.getPanels(); for( var i = 0 ; i < panels.length; i++ ) { if( panel == panels[i] ) return i; } return -1; }; Spry.Widget.Accordion.prototype.getCurrentPanelIndex = function() { return this.getPanelIndex(this.currentPanel); }; Spry.Widget.Accordion.prototype.getPanelTab = function(panel) { if (!panel) return null; return this.getElementChildren(panel)[0]; }; Spry.Widget.Accordion.prototype.getPanelContent = function(panel) { if (!panel) return null; return this.getElementChildren(panel)[1]; }; Spry.Widget.Accordion.prototype.getElementChildren = function(element) { var children = []; var child = element.firstChild; while (child) { if (child.nodeType == 1 /* Node.ELEMENT_NODE */) children.push(child); child = child.nextSibling; } return children; }; Spry.Widget.Accordion.prototype.focus = function() { if (this.element && this.element.focus) this.element.focus(); }; Spry.Widget.Accordion.prototype.blur = function() { if (this.element && this.element.blur) this.element.blur(); }; ///////////////////////////////////////////////////// Spry.Widget.Accordion.PanelAnimator = function(accordion, panel, opts) { this.timer = null; this.interval = 0; this.fps = 60; this.duration = 500; this.startTime = 0; this.transition = Spry.Widget.Accordion.PanelAnimator.defaultTransition; this.onComplete = null; this.panel = panel; this.panelToOpen = accordion.getElement(panel); this.panelData = []; this.useFixedPanelHeights = accordion.useFixedPanelHeights; Spry.Widget.Accordion.setOptions(this, opts, true); this.interval = Math.floor(1000 / this.fps); // Set up the array of panels we want to animate. var panels = accordion.getPanels(); for (var i = 0; i < panels.length; i++) { var p = panels[i]; var c = accordion.getPanelContent(p); if (c) { var h = c.offsetHeight; if (h == undefined) h = 0; if (p == panel && h == 0) c.style.display = "block"; if (p == panel || h > 0) { var obj = new Object; obj.panel = p; obj.content = c; obj.fromHeight = h; obj.toHeight = (p == panel) ? (accordion.useFixedPanelHeights ? accordion.fixedPanelHeight : c.scrollHeight) : 0; obj.distance = obj.toHeight - obj.fromHeight; obj.overflow = c.style.overflow; this.panelData.push(obj); c.style.overflow = "hidden"; c.style.height = h + "px"; } } } }; Spry.Widget.Accordion.PanelAnimator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); }; Spry.Widget.Accordion.PanelAnimator.prototype.start = function() { var self = this; this.startTime = (new Date).getTime(); this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval); }; Spry.Widget.Accordion.PanelAnimator.prototype.stop = function() { if (this.timer) { clearTimeout(this.timer); // If we're killing the timer, restore the overflow // properties on the panels we were animating! for (i = 0; i < this.panelData.length; i++) { obj = this.panelData[i]; obj.content.style.overflow = obj.overflow; } } this.timer = null; }; Spry.Widget.Accordion.PanelAnimator.prototype.stepAnimation = function() { var curTime = (new Date).getTime(); var elapsedTime = curTime - this.startTime; var i, obj; if (elapsedTime >= this.duration) { for (i = 0; i < this.panelData.length; i++) { obj = this.panelData[i]; if (obj.panel != this.panel) { obj.content.style.display = "none"; obj.content.style.height = "0px"; } obj.content.style.overflow = obj.overflow; obj.content.style.height = (this.useFixedPanelHeights || obj.toHeight == 0) ? obj.toHeight + "px" : "auto"; } if (this.onComplete) this.onComplete(); return; } for (i = 0; i < this.panelData.length; i++) { obj = this.panelData[i]; var ht = this.transition(elapsedTime, obj.fromHeight, obj.distance, this.duration); obj.content.style.height = ((ht < 0) ? 0 : ht) + "px"; } var self = this; this.timer = setTimeout(function() { self.stepAnimation(); }, this.interval); };

"Resume-best-version"
Bootstrap 4.0.0 Snippet by mrservon22

Related: See More

Questions / Comments:

"Resume-best-version" Bootstrap 4.0.0 Snippet by mrservon22

Related: See More

Questions / Comments:

"Resume-best-version"
Bootstrap 4.0.0 Snippet by mrservon22