<div class="accordionContainer">
  <div class="accordionItem">
    <div class="accordionHeader">
      <span>Accordion Item 1</span>
    </div>
    <div class="accordionContent">
      <div class="accordionContentInner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus fringilla mauris eget auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec dignissim viverra sapien varius volutpat. Suspendisse gravida orci in nunc lacinia mollis. Mauris viverra ultrices mauris, et sagittis neque iaculis vel. In hendrerit varius eleifend<p>
      </div>
    </div>
  </div>
  
  <div class="accordionItem">
    <div class="accordionHeader">
      <span>Accordion Item 2</span>
    </div>
    <div class="accordionContent">
      <div class="accordionContentInner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus fringilla mauris eget auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec dignissim viverra sapien varius volutpat. Suspendisse gravida orci in nunc lacinia mollis. Mauris viverra ultrices mauris, et sagittis neque iaculis vel. In hendrerit varius eleifend<p>
      </div>
    </div>
  </div>
  
  <div class="accordionItem">
    <div class="accordionHeader">
      <span>Accordion Item 3</span>
    </div>
    <div class="accordionContent">
      <div class="accordionContentInner">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam finibus fringilla mauris eget auctor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec dignissim viverra sapien varius volutpat. Suspendisse gravida orci in nunc lacinia mollis. Mauris viverra ultrices mauris, et sagittis neque iaculis vel. In hendrerit varius eleifend<p>
      </div>
    </div>
  </div>
</div>

.accordionContainer {
  font-family:Arial;

	.accordionItem {
    margin-bottom:10px;
    
		&.active {
			
		}
	}

	.accordionHeader {
    border-radius:2px;
    background-color:#ccc;
    padding:5px;
    font-weight:700;
    
		&:hover {
			cursor:pointer;
		}
	}

	.accordionContent {
		overflow:hidden;
		transition:0.3s ease;
		transform: tanslateZ(0);
		height:0px;
	}

	.accordionContentInner {
		padding:15px 0;
    background-color:#eae5e5;
    padding:5px 10px;
	}
}

function jsAccordion(accordionContainerClass, openFirstItem) {
    if(typeof accordionContainerClass != 'string' && typeof accordionItemClass != 'string' && typeof openFirstItem != 'boolean') {
        return;
    }

    var accordion = document.querySelector(accordionContainerClass);
    var accordionItem = accordion.querySelectorAll('.accordionItem');

    (function init() {
        for(var i = 0; accordionItem.length > i; i++) {

            var accordionContent = accordionItem[i].querySelector('.accordionContent');

            if(openFirstItem && i === 0) {
                setDefaultHeight(accordionContent);
                addClass(accordionItem[i], 'active');
                showAccordion(accordionContent)
            } else {
                setDefaultHeight(accordionContent);
                hideAccordion(accordionContent);
            }
        }
    })();

    function setDefaultHeight(element) {
        var defaultHeight = element.children[0].offsetHeight;
        element.setAttribute('data-defaultheight', defaultHeight);

        element.previousElementSibling.addEventListener('click', function() {
            if(hasClass(element.parentNode, 'active')) {
                hideAccordion(element);
            } else {
                hideAllAccordions(accordionItem);
                showAccordion(element);
            }
        });
    }

    function hideAllAccordions() {
        for(var i = 0; accordionItem.length > i; i++) {
            var accordionContent = accordionItem[i].querySelector('.accordionContent');
            hideAccordion(accordionContent);
        }
    }

    function hideAccordion(element) {
        element.style.height = '0px';
        element.children[0].style.visilibty = 'hidden';
        removeClass(element.parentNode, 'active');
    }

    function showAccordion(element) {
        var defaultHeight = element.getAttribute('data-defaultheight');
        element.style.height = defaultHeight + 'px';
        element.children[0].style.visilibty = 'visible';
        addClass(element.parentNode, 'active');
    }

    function hasClass(element, className) {
        if (element.classList) {
            return element.classList.contains(className);
        } else {
            return new RegExp('(^| )' + className + '( |$)', 'gi').test(element.className);
        }
    }

    function addClass(element, className){
        if(element.className.indexOf(className) == -1) {
            element.className += ' ' + className;
        }          
    }

    function removeClass(element, name) {
       if (hasClass(element, name)) {
          element.className=element.className.replace(new RegExp('(\\s|^)'+name+'(\\s|$)'),' ').replace(/^\s+|\s+$/g, '');
       }
    }
}

jsAccordion('.accordionContainer', true); 
// setting this to false will close all of the accordion items onload.