0

I'm a beginner and I'm trying to get this Responsive Animated Accordion to work on my website but it seems that i'm doing something wrong.

I basically copy/pasted html, CSS and js files, and into the html one I just added:

<head>
<link rel="stylesheet" type="text/css" href="accordion.css">
</head>
<script src="accordion.js"></script>

From the browser inspection it seems that the js file is loaded, but it's definitelly not working, is there anything else I should have done?

Full html file:

<head>
<link rel="stylesheet" type="text/css" href="accordion.css">
</head>
<script src="accordion.js"></script>
<div class="container">
          <h1>CSS Responsive Animated Accordion</h1>
          <div class="accordion">
            <dl>
              <dt>
                <a href="#accordion1" aria-expanded="false" aria-controls="accordion1" class="accordionTitle js-accordionTrigger">First Accordion heading</a>
              </dt>
              <dd class="accordionItem is-collapsed" id="accordion1" aria-hidden="true">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. </p>
                <p>Aliquam dapibus, ante quis fringilla feugiat, mauris risus condimentum massa, at elementum libero quam ac ligula. Pellentesque at rhoncus dolor. Duis porttitor nibh ut lobortis aliquam. Nullam eu dolor venenatis mauris placerat tristique eget id dolor. Quisque blandit adipiscing erat vitae dapibus. Nulla aliquam magna nec elementum tincidunt.</p>
              </dd>
              <dt>
                <a href="#accordion2" aria-expanded="false" aria-controls="accordion2" class="accordionTitle js-accordionTrigger">
                  Second Accordion heading</a>
              </dt>
              <dd class="accordionItem is-collapsed" id="accordion2" aria-hidden="true">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. </p>
                <p>Aliquam dapibus, ante quis fringilla feugiat, mauris risus condimentum massa, at elementum libero quam ac ligula. Pellentesque at rhoncus dolor. Duis porttitor nibh ut lobortis aliquam. Nullam eu dolor venenatis mauris placerat tristique eget id dolor. Quisque blandit adipiscing erat vitae dapibus. Nulla aliquam magna nec elementum tincidunt.</p>
              </dd>
              <dt>
                <a href="#accordion3" aria-expanded="false" aria-controls="accordion3" class="accordionTitle js-accordionTrigger">
                  Third Accordion heading
                </a>
              </dt>
              <dd class="accordionItem is-collapsed" id="accordion3" aria-hidden="true">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor risus non bibendum. Maecenas sollicitudin eros in quam imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut, iaculis vel ipsum. Donec dignissim arcu nec elit faucibus condimentum. Donec facilisis consectetur enim sit amet varius. Pellentesque justo dui, sodales quis luctus a, iaculis eget mauris. </p>
                <p>Aliquam dapibus, ante quis fringilla feugiat, mauris risus condimentum massa, at elementum libero quam ac ligula. Pellentesque at rhoncus dolor. Duis porttitor nibh ut lobortis aliquam. Nullam eu dolor venenatis mauris placerat tristique eget id dolor. Quisque blandit adipiscing erat vitae dapibus. Nulla aliquam magna nec elementum tincidunt.</p>
              </dd>
            </dl>
          </div>
        </div>

Full js file

//uses classList, setAttribute, and querySelectorAll
//if you want this to work in IE8/9 youll need to polyfill these
(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) {
    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);
  }
})();

Full CSS file

//updated ver
* {
  box-sizing:border-box;
}
@import url(http://fonts.googleapis.com/css?family=Lato:400,700);
body { 

  font-family:'Lato';
}
h1 {
  font-size:2em;
  padding:2em;
  text-align:center;
}
.accordion {
    dl {
        border:1px solid #ddd;
         &:after {
            content: "";
            display:block;
            height:1em;
            width:100%;
            background-color:darken(#38cc70, 10%);
        }
    }
    dt {
        >a {
          text-align:center;
          font-weight:700; 
          padding:2em;
          display:block;
          text-decoration:none;
          color:#fff;
          transition:background-color 0.5s ease-in-out;
        }
      }
    dd {
        background-color:#eee;
        font-size:1em;
        line-height:1.5em;
        >p {
          padding:1em 2em 1em 2em;
        }
    }
}
.accordion {
    position:relative;
    background-color:#eee;
}
.container {
  max-width:960px;
  margin:0 auto;
  padding:2em 0 2em 0;
}
.accordionTitle {
 background-color:#38cc70; 
  border-bottom:1px solid darken(#38cc70, 5%);
  &:before {
   content: "+";
   font-size:1.5em;
   line-height:0.5em;
   float:left; 
   transition: transform 0.3s ease-in-out;
  }
  &:hover {
    background-color:darken(#38cc70, 10%);
  }
}
.accordionTitleActive, 
.accordionTitle.is-expanded {
   background-color:darken(#38cc70, 10%);
    &:before {

      transform:rotate(-225deg);
    }
}
.accordionItem {
    height:auto;
    overflow:hidden; 
    //SHAME: magic number to allow the accordion to animate

     max-height:50em;
    transition:max-height 1s;   


    @media screen and (min-width:48em) {
         max-height:15em;
        transition:max-height 0.5s

    }


}
.accordionItemCollapsed, 
.accordionItem.is-collapsed {
    max-height:0;
}
.animateIn {
     animation: accordionIn 0.65s normal ease-in-out both 1; 
}
.animateOut {
     animation: accordionOut 0.75s alternate ease-in-out both 1;
}
@keyframes accordionIn {
  0% {
    opacity: 0;
    transform:scale(0.8);
  }
  100% {
    opacity:1;
    transform:scale(1);
  }
}

@keyframes accordionOut {
    0% {
       opacity: 1;
       transform:scale(1);
     }
     100% {
          opacity:0;
          transform:scale(0.8);
       }
}
Filipe Tavares
  • 13
  • 3

1 Answers1

1

There are two problems with your code.

  1. You are trying to use Sass instead of plain old css. This works in the codepen example, because codepen compiles the Sass to css. If you want to use Sass, you'll need to compile it to css when opening in the browser, since it does not understand Sass. You can use a tool that suits your workflow best, or compile online, for example here - http://sassmeister.com. For more info on sass, see http://sass-lang.com. If you are a beginner, I would stick to regular old css for a while before starting to use a more advanced tool like Sass.

  2. You're including the javascript file before the markup has loaded. Moving the <script src="accordion.js"></script> after the closing div for the container should fix the issue. You can read more about this here - pure JavaScript equivalent to jQuery's $.ready() how to call a function when the page/dom is ready for it

Here's a working jsbin of the accordion, should be easy to replicate that locally on your machine. http://jsbin.com/laqehirobi/1/edit?html,css,js,output

Also, your markup is not valid, consider validating it with a tool like http://validator.w3.org/check - you'll need to add html and body elements and a title tag in the head.

Community
  • 1
  • 1
rk1
  • 988
  • 9
  • 13