A simple accordion menu using BEM classes

HTML:

    <div id="accordion" class="accordion">
        <div id="Demo1" class="accordion__item accordion__item--first">
            <h4 class="accordion__title">Section 1</h4>
            <p class="accordion__text">Some text..</p>
        </div>
        <div id="Demo2" class="accordion__item accordion__item--second">
            <h4 class="accordion__title">Section 2</h4>
            <p class="accordion__text">Some text..</p>
        </div>
        <div id="Demo3" class="accordion__item accordion__item--third">
            <h4 class="accordion__title">Section 3</h4>
            <p class="accordion__text">Some text..</p>
        </div>
    </div>

SASS:

.accordion {
    max-width: 400px;
    margin: 0 auto;

    &__item {
        padding: 20px;
        cursor: pointer;

        &--first {
            background: lightpink;
            border-top-left-radius: 25px;
            border-top-right-radius: 25px;
        }

        &--second {
            background: lightblue;
        }

        &--third {
            background: lightgreen;
            border-bottom-left-radius: 25px;
            border-bottom-right-radius: 25px;
        }
    }

    &__title {
        color: aliceblue;
        text-transform: uppercase;
        font-size: 20px;
        text-align: center;
    }

    &__text {
        display: none;

        &--open {
            display: block;
        }
    }
}

JAVASCRIPT:

var itemParent = document.querySelector('#accordion');
itemParent.addEventListener("click", opentext, false);

 function opentext(e) {
     if (e.target !== e.currentTarget) {
         var clickedItem = e.target.id;
         var itemClicked = document.getElementById(clickedItem);
         var itemText = itemClicked.lastElementChild;
         itemText.classList.toggle('accordion__text--open');
     }
     e.stopPropagation();
 }

Live result: https://codepen.io/thomaskarl/pen/QVprZe