SCSS

HTML

<dl class="accordion">
  <dt>Section One</dt>
  <dd><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></dd>
  <dt>Section Two</dt>
  <dd><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></dd>
  <dt>Section Three</dt>
  <dd><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></dd>
</dl>

SCSS

/* accordion */
.accordion
	{
	margin: auto;
	padding: 0;
  width: 100%;
	max-width: 50vw;
	overflow: hidden;
  font-family: arial;
	dt
		{
		display: flex;
    flex-wrap: wrap;
    align-content: center;
    align-items: center;
    justify-content: space-between;
		margin: 0;
		padding: 2vmin 0;
		cursor: pointer;
    overflow: hidden;
		&::after
			{
            transform-origin: center;
            transition: all .2s ease;
			      font-size: 1.6rem;
			      content: "\002B";
            transform: rotate(-90deg);
			}
		}
	dd
		{
		margin: 0;
		padding: 0;
        max-height: 0;
        width: 100%;
        overflow: hidden;
        border-bottom: 1px solid gray;
        transition: all .2s ease;
        p
            {
            margin: 0;
            padding: 0 0 4vmin 0;
            }
		}
	.activated
		{
        border-bottom: 1px solid transparent;
        max-height: 40vh;
        &::after
			{
			      content: "\2212";
            transform: rotate(0);
			}
		}
	}

JavaScript

// Accordion Dropdown
var d_tit = document.querySelectorAll("dt");
var d_des_el = document.querySelectorAll("dd");

for (var i = 0; i < d_tit.length; i++) {
    d_tit[i].addEventListener("click", function(e) {
        e.preventDefault();
        var d_des = this.nextElementSibling;
        if (d_des.style.maxHeight){
            d_des.style.maxHeight = null;
            this.classList.remove("activated");
        } else {
            for (var i = 0; i < d_des_el.length; i++) {
                d_des_el[i].style.maxHeight = null;
                d_tit[i].classList.remove("activated");
            }
            d_des.style.maxHeight = d_des.scrollHeight + "px";
            this.classList.add("activated");
        } 
    });
}