Notes

<div class="container">

<div class="accordion">
<dl>
<dt>
<a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordion-title accordionTitle js-accordionTrigger">Today</a>
</dt>
<dd class="accordion-content accordionItem is-collapsed" id="accordion1" aria-hidden="true">
<p>

<!-- Text Goes Here-->
On Tuesday there is a chance of rain. Cloudy, then gradually becoming mostly sunny, with a high near 46. Calm wind becoming northwest 5 to 7 mph in the morning. Chance of precipitation is 50%. New precipitation amounts of less than a tenth of an inch possible.
</dd>
<dt>
<a href="#accordion2" aria-expanded="false" aria-controls="accordion2" class="accordion-title accordionTitle js-accordionTrigger">
Tonight</a>
</dt>
<dd class="accordion-content accordionItem is-collapsed" id="accordion2" aria-hidden="true">
<p>
<!-- Text Goes Here-->
On Tuesday night, Mostly clear, with a low around 30. Northwest wind 5 to 7 mph. </p>
</dd>
<dt>
<a href="#accordion3" aria-expanded="false" aria-controls="accordion3" class="accordion-title accordionTitle js-accordionTrigger">


Tomorrow</a>
</dt>
<dd class="accordion-content accordionItem is-collapsed" id="accordion3" aria-hidden="true">
<p>
<!-- Text Goes Here-->
On Wednsday,Mostly sunny, with a high near 41. West wind 5 to 14 mph, with gusts as high as 25 mph.

</dd>
</dl>
</div>
</div>

<script>
(function(){
var d = document,
accordionToggles = d.querySelectorAll('.js-accordionTrigger'),
setAria,
setAccordionAria,
switchAccordion,
touchSupported = ('ontouchstart' in window),
pointerSupported = ('pointerdown' in window);

skipClickDelay = function(e){
e.preventDefault();
e.target.click();
}

setAriaAttr = function(el, ariaType, newProperty){
el.setAttribute(ariaType, newProperty);
};
setAccordionAria = function(el1, el2, expanded){
switch(expanded) {
case "true":
setAriaAttr(el1, 'aria-expanded', 'true');
setAriaAttr(el2, 'aria-hidden', 'false');
break;
case "false":
setAriaAttr(el1, 'aria-expanded', 'false');
setAriaAttr(el2, 'aria-hidden', 'true');
break;
default:
break;
}
};
//function
switchAccordion = function(e) {
console.log("triggered");
e.preventDefault();
var thisAnswer = e.target.parentNode.nextElementSibling;
var thisQuestion = e.target;
if(thisAnswer.classList.contains('is-collapsed')) {
setAccordionAria(thisQuestion, thisAnswer, 'true');
} else {
setAccordionAria(thisQuestion, thisAnswer, 'false');
}
thisQuestion.classList.toggle('is-collapsed');
thisQuestion.classList.toggle('is-expanded');
thisAnswer.classList.toggle('is-collapsed');
thisAnswer.classList.toggle('is-expanded');

thisAnswer.classList.toggle('animateIn');
};
for (var i=0,len=accordionToggles.length; i<len; i++) {
if(touchSupported) {
accordionToggles[i].addEventListener('touchstart', skipClickDelay, false);
}
if(pointerSupported){
accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false);
}
accordionToggles[i].addEventListener('click', switchAccordion, false);
}
})();
</script>

<style>@import url(https://fonts.googleapis.com/css?family=Lato:400,700);
* {
box-sizing: border-box;
}


.accordion dl,
.accordion-list {
border: 1px solid #FF8500;
font-family: 'Lato';
}
.accordion dl:after,
.accordion-list:after {
content: "";
display: block;
height: 1em;
width: 100%;
background-color: #FF8500;
font-family: 'Lato';
}

.accordion dd,
.accordion__panel {
background-color: #eee;
font-size: 1em;
line-height: 1.5em;
}

.accordion p {
padding: 1em 2em 1em 2em;
}

.accordion {
position: relative;
background-color: #FF8500;
}

.container {
max-width: 960px;
margin: 0 auto;
padding: 2em 0 2em 0;
}

.accordionTitle,
.accordion__Heading {
background-color: #FF7000;
text-align: center;
font-weight: 700;
padding: 2em;
display: block;
text-decoration: none;
color: #fff;
-webkit-transition: background-color 0.5s ease-in-out;
transition: background-color 0.5s ease-in-out;
border-bottom: 1px solid #FF6000;
}
.accordionTitle:before,
.accordion__Heading:before {
content: "+";
font-size: 1.5em;
line-height: 0.5em;
float: left;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out;
}
.accordionTitle:hover,
.accordion__Heading:hover {
background-color: #FF6000;
}

.accordionTitleActive,
.accordionTitle.is-expanded {
background-color: #FF6000;
}
.accordionTitleActive:before,
.accordionTitle.is-expanded:before {
-webkit-transform: rotate(-225deg);
transform: rotate(-225deg);
}

.accordionItem {
height: auto;
overflow: hidden;
max-height: 50em;
-webkit-transition: max-height 1s;
transition: max-height 1s;
}
@media screen and (min-width: 48em) {
.accordionItem {
max-height: 15em;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
}
}

.accordionItem.is-collapsed {
max-height: 0;
}

.no-js .accordionItem.is-collapsed {
max-height: auto;
}

.animateIn {
-webkit-animation: accordionIn 0.45s normal ease-in-out both 1;
animation: accordionIn 0.45s normal ease-in-out both 1;
}

.animateOut {
-webkit-animation: accordionOut 0.45s alternate ease-in-out both 1;
animation: accordionOut 0.45s alternate ease-in-out both 1;
}

@-webkit-keyframes accordionIn {
0% {
opacity: 0;
-webkit-transform: scale(0.9) rotateX(-60deg);
transform: scale(0.9) rotateX(-60deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}

@keyframes accordionIn {
0% {
opacity: 0;
-webkit-transform: scale(0.9) rotateX(-60deg);
transform: scale(0.9) rotateX(-60deg);
-webkit-transform-origin: 50% 0;
transform-origin: 50% 0;
}
100% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes accordionOut {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(0.9) rotateX(-60deg);
transform: scale(0.9) rotateX(-60deg);
}
}
@keyframes accordionOut {
0% {
opacity: 1;
-webkit-transform: scale(1);
transform: scale(1);
}
100% {
opacity: 0;
-webkit-transform: scale(0.9) rotateX(-60deg);
transform: scale(0.9) rotateX(-60deg);
}
}
</style>