Cacher is the code snippet organizer for pro developers

<!-- Replace {{ page.content }} with -->

{% assign fix_content = page.content | replace: '<p>{{start_accordion}}', '{{start_accordion}}' | replace: '<span>{{start_accordion}}', '{{start_accordion}}' | replace: '{{start_accordion}}</p>', '{{start_accordion}}' | replace: '{{start_accordion}}</span>', '{{start_accordion}}' | replace: '<p>{{end_accordion}}', '{{end_accordion}}' | replace: '<span>{{end_accordion}}', '{{end_accordion}}' | replace: '{{end_accordion}}</p>', '{{end_accordion}}' | replace: '{{end_accordion}}</span>', '{{end_accordion}}' | replace: '<p>[', '[' | replace: '<span>[', '[' | replace: ']</p>', ']' | replace: ']</span>', ']' %}

	{% assign raw_content = fix_content | replace: '{{start_accordion}}','~%@%~*&ACCORDION&*' | replace: '{{end_accordion}}','~%@%~' | split: '~%@%~' %}


	{% for content in raw_content %}
	    {% if content contains '*&ACCORDION&*' %}
			{% assign raw_accordion = content | replace: '*&ACCORDION&*', '' | remove_first: '[' | split: '[' %}
	    	<div class="accordion">
	            {% for accordion in raw_accordion %}
	          		{% assign heading = accordion | split: ']' | first %}
	          		{% assign body = accordion | split: ']' | last %}
	          		<div class="indv-faq">
	                  <h3 class="faq-title" >{{ heading }} <i class="icon-plus"></i><i class="icon-minus"></i></h3>
	                  <div class="faq-content"><p>{{ body }}</p></div>
	                </div>
	            {% endfor %}
	        </div>
		{% else %}
			{{ content }}
	    {% endif %}
	{% endfor %}

$(function () {
  $('.faq-title').click(function(){
    $(this).parent().find('.faq-content').slideToggle();

      if( $(this).hasClass('faq-active') ) {
        $(this).removeClass('faq-active');
      }else{
        $(this).addClass('faq-active');
      }

    $(this).parent().siblings().find('.faq-content').slideUp();
    $(this).parent().siblings().children().removeClass('faq-active');
  });
});

/*  Base Styling - Probably the bare minimum  */

.faq-title{
	margin:0 0 2px;
	padding: 10px 7px;
	border-bottom: 1px solid rgba(0, 0, 0, 0);
  background: rgba(12, 152, 192, .65);
	text-transform: uppercase;
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	font-weight: bold;
	color: #fff;
}

.faq-active{
	border-bottom: 2px solid rgba(231, 94, 55, 1);
}

.fa-plus{
  display: block;
  float: right;
}

.fa-minus{
  display: none;
  float: right;
}

.faq-active .fa-plus{
  display: none;
}

.faq-active .fa-minus{
  display: block;
}

.faq-content{
	display: none;
	padding:15px;
	background: #fff;
}

.faq-content p{
	margin: 0 0 10px 0;
}

<!-- You define an accordion like this -->

{{start_accordion}}

[Accordion Header 1]

Accordion Content 1

[Accordion Header 2]

Accordion Content 2

{{end_accordion}}