Simple Wordpress FAQ

FAQ Shortcode

/**
 * Build the FAQ list for return. Dependent on an Advanced Custom Fields[http://www.advancedcustomfields.com/] repeater field 'faq' with containing 'question' [text] and 'answer' [wysiwyg].
 */
function jw1234_output_faq( $atts ){

				if (get_field('faq')):
					$jw1234_faq = get_field('faq');					

					$jw1234_question_index = "<ul class='faq-index'>";
					$jw1234_question_list = "<ul class='faq-list'>";

					foreach ($jw1234_faq as $faq_number => $jw1234_question):
					 		$jw1234_question_index .= "<li><a href='#faq-$faq_number'><h3>".$jw1234_question['question']."</h3></a></li>";
					 		$jw1234_question_list .= "<li id='faq-$faq_number' class='faq-entry'>";
					 		$jw1234_question_list .= "<h3>".$jw1234_question['question']."</h3>";
					 		$jw1234_question_list .= $jw1234_question['answer'];
					 		$jw1234_question_list .= "</li> <!-- end #faq-$faq_number --!>";
					endforeach;

					$jw1234_question_index .= "</ul>";
					$jw1234_question_list .= "</ul>";

					return $jw1234_question_index . $jw1234_question_list;
				endif;
}
add_shortcode( 'FAQ', 'jw1234_output_faq' );

FAQ Style

	.faq-index, .faq-list
  	{
		li
		{
			list-style-type: none;
			list-style-image: none;
			padding-left: 0;
		}
	}
	.faq-index {
		padding-bottom: 3em;
		margin-bottom: 3em;
		border-bottom: 1px solid $lightblue;
		li:last-child {
			a h3 {
				margin-bottom: 0;
			}
		}
		a {
			text-decoration: none;
			&:hover	h3{
				color: $lightblue;
			}
		}
	}
	.faq-list {
		li {
			position: relative;
			margin-bottom: 2em;
			&:before
			{
				content: "Q";
				font-size: 60px;
				font-weight: bold;
				position: absolute;
				top: -20px;
				left: -10px;
				opacity: .1;
				color: $lightblue;
				z-index: 0;
			}
		}
		h3 {
			display: block;
			padding-left: 16px;
			padding-right: 16px;
			&:before {
				content: "Q:";
				color: $green;
				margin-left: -16px;
				margin-right: 4px;
				font-weight: bold;
			}
		}
		p {
			display: block;
			padding-left: 36px;
			padding-right: 36px;
			&:first-of-type:before
			{
				content: "A:";
				color: $yellow;
				margin-left: -16px;
				margin-right: 6px;
				font-weight: bold;
			}
		}
	}