DLS accordion component.

dls-accordian.html

<section id="accordian" class="row section">
  <div class="large-12 columns">
    <h1>Accordian</h1>
  </div>
  <span class="gist"><a class="icon icon-ajmn-embed" href="https://gist.github.com/capitalJT/13d3120ac48cfdd55fc8" target="_blank"></a></span>
  <hr>
	<div class="large-12 columns accordian-wrapper">
		<dl class="accordion" data-accordion>
		  <dd class="accordion-navigation">
		    <a href="#panel1-1">
		    	<span class="icon icon-ajmn-plus"></span>
		    	<span class="bold">How do I apply for a job?</span>
		    </a>
		    <div id="panel1-1" class="content">
		      Panel 1. Voice placement and elocution courses represent the basics for the success of any TV or radio presenter. This course is one of the most important courses offered by the Center in the field of radio journalism, as the voice is the only means of communication with radio listeners. 
		    </div>
		  </dd>
		  <dd class="accordion-navigation">
		    <a href="#panel1-2">
		    	<span class="icon icon-ajmn-plus"></span>
		    	<span class="bold">How long does it take for a response after I apply for a job?</span>
		    </a>
		    <div id="panel1-2" class="content">
		      Panel 2. Voice placement and elocution courses represent the basics for the success of any TV or radio presenter. This course is one of the most important courses offered by the Center in the field of radio journalism, as the voice is the only means of communication with radio listeners. 
		    </div>
		  </dd>
		  <dd class="accordion-navigation">
		    <a href="#panel1-3">
		    	<span class="icon icon-ajmn-plus"></span>
		    	<span class="bold">Do I need to be based in a certain country?</span>
		    </a>
		    <div id="panel1-3" class="content">
		      Panel 3. Voice placement and elocution courses represent the basics for the success of any TV or radio presenter. This course is one of the most important courses offered by the Center in the field of radio journalism, as the voice is the only means of communication with radio listeners. 
		    </div>
		  </dd>
		  <dd class="accordion-navigation">
		    <a href="#panel1-4">
		    	<span class="icon icon-ajmn-plus"></span>
		    	<span class="bold">Are there freelance jobs available?</span>
		    </a>
		    <div id="panel1-4" class="content">
		      Panel 3. Voice placement and elocution courses represent the basics for the success of any TV or radio presenter. This course is one of the most important courses offered by the Center in the field of radio journalism, as the voice is the only means of communication with radio listeners. 
		    </div>
		  </dd>
		</dl>
  </div>
</section>

dls-accordian.scss

.accordian-wrapper{
	@extend %margin-bottom;
	.ajmn-plus{
		margin-right: $spacing-value / 2;
		&:before{
			float: left;
			padding:2px;
		}
	}
	.active{
		.ajmn-plus:before{
			@include rotate( $val: 45deg );
		}
	}
	//these are the titles that are not active
	.accordion .accordion-navigation > a, .accordion dd > a{
		background-color: $color-shadow;
	}

	//this is the title that is active
	.accordion .accordion-navigation.active > a, .accordion dd.active > a{
		background-color: $color-shadow;
	}

	//this is the relevant content to the focused description list
	.accordion .accordion-navigation > .content.active, .accordion dd > .content.active{
		// background-color: #fff;
		border-bottom:solid thick $color-shadow;
	}	
}