Last active
December 13, 2016 00:54
-
-
Save neilgee/379cd8116b7e94769878759dd3033e81 to your computer and use it in GitHub Desktop.
FAQs with Javsscript
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
// this toggles each question independently | |
// ref - http://www.w3schools.com/howto/howto_js_accordion.asp | |
<script> | |
/* Toggle between adding and removing the "active" and "show" classes when the user clicks on one of the "Section" buttons. The "active" class is used to add a background color to the current button when its belonging panel is open. The "show" class is used to open the specific accordion panel */ | |
var acc = document.getElementsByClassName("accordion"); | |
var i; | |
for (i = 0; i < acc.length; i++) { | |
acc[i].onclick = function(){ | |
this.classList.toggle("active"); | |
this.nextElementSibling.classList.toggle("show"); | |
}; | |
} | |
</script> |
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
<style> | |
/* Style the element that is used to open and close the accordion class */ | |
p.accordion { | |
background-color: #eee; | |
color: #444; | |
cursor: pointer; | |
padding: 18px; | |
width: 100%; | |
text-align: left; | |
border: none; | |
outline: none; | |
transition: 0.4s; | |
margin-bottom:10px; | |
} | |
/* Add a background color to the accordion if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */ | |
p.accordion.active, p.accordion:hover { | |
background-color: #ddd; | |
} | |
/* Unicode character for "plus" sign (+) */ | |
p.accordion:after { | |
content: '\2795'; | |
font-size: 13px; | |
color: #777; | |
float: right; | |
margin-left: 5px; | |
} | |
/* Unicode character for "minus" sign (-) */ | |
p.accordion.active:after { | |
content: "\2796"; | |
} | |
/* Style the element that is used for the panel class */ | |
div.panel { | |
padding: 0 18px; | |
background-color: white; | |
max-height: 0; | |
overflow: hidden; | |
transition: 0.4s ease-in-out; | |
opacity: 0; | |
margin-bottom:10px; | |
} | |
div.panel.show { | |
opacity: 1; | |
max-height: 500px; /* Whatever you like, as long as its more than the height of the content (on all screen sizes) */ | |
} | |
</style> |
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
<h3>FAQs</h3> | |
<p class="accordion">Q1. What currency is the course charged in?</p> | |
<div class="panel">A. The course is charged in Australian dollars.</div> | |
<p class="accordion">Q2. What if the course doesn’t help me?</p> | |
<div class="panel">A. If it doesn't help you I'll refund the purchase price in full.</div> | |
<p class="accordion">Q3. When will the webinars take place?</p> | |
<div class="panel">A. Depending on the mix of countries and time zones for people attending the webinars, I will pick a time that works best for most participants. All webinars will be recorded so you can listen to them again. The private Facebook group will obviously be available 24/7 and I’ll be monitoring and contributing to the discussion regularly.</div> | |
<p class="accordion">Q4. What is the self-directed mentoring program?</p> | |
<div class="panel">A. The self-directed mentoring program is designed to help you set-up and run an effective mentee-mentor relationship as part of the course.</div> |
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
// this one toggles only one open at a time | |
// Ref - http://stackoverflow.com/questions/37745154/only-open-one-accordion-tab-at-one-time | |
<script> | |
document.addEventListener("DOMContentLoaded", function(event) { | |
var acc = document.getElementsByClassName("accordion"); | |
var panel = document.getElementsByClassName('panel'); | |
for (var i = 0; i < acc.length; i++) { | |
acc[i].onclick = function() { | |
var setClasses = !this.classList.contains('active'); | |
setClass(acc, 'active', 'remove'); | |
setClass(panel, 'show', 'remove'); | |
if (setClasses) { | |
this.classList.toggle("active"); | |
this.nextElementSibling.classList.toggle("show"); | |
} | |
} | |
} | |
function setClass(els, className, fnName) { | |
for (var i = 0; i < els.length; i++) { | |
els[i].classList[fnName](className); | |
} | |
} | |
}); | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment