Accordion Snipet

Add this to the functions file to get a nice Accordion function

//////////////////////////////////////////////////////////////////
// Accordian
//////////////////////////////////////////////////////////////////
add_shortcode('accordion', 'shortcode_accordion');
	function shortcode_accordion( $atts, $content = null ) {
	$out = '';
	$out .= '<div class="accordion">';
	$out .= do_shortcode($content);
	$out .= '</div>';
	
   return $out;
}	

//////////////////////////////////////////////////////////////////
// Toggle shortcode
//////////////////////////////////////////////////////////////////
add_shortcode('toggle', 'shortcode_toggle');
	function shortcode_toggle( $atts, $content = null ) {
	extract(shortcode_atts(array(
        'title'      => '',
        'open' => 'no'
    ), $atts));

    $toggleclass = '';
    $toggleclass2 = '';
    $togglestyle = '';

	if($open == 'yes'){
		$toggleclass = "active";
		$toggleclass2 = "default-open";
		$togglestyle = "display: block;";
	}

	$out = '';
	$out .= '<h5 class="toggle '.$toggleclass.'"><span class="arrow">+</span>' .$title. '</h5>';
	$out .= '<div class="toggle-content '.$toggleclass2.'" style="'.$togglestyle.'">';
	$out .= do_shortcode($content);
	$out .= '</div>';
	
   return $out;
}

Then add to js


			$( ".toggle" ).click(function(event) {

			  $(this).parent().children('.toggle-content').toggleClass('on');
			  var arrow_text = $(this).children( ".arrow" ).html();
			  
			  if (arrow_text == "-") {
			  $(this).children( ".arrow" ).html( '+' ); }else{ $(this).children( ".arrow" ).html( '-' ); }
			  
			  $(this).parent().children('.toggle-content').slideToggle( "fast", function() { });


			});

Then add to css


.toggle  { cursor: pointer; }


.toggle-content {
	display: none;
}

.arrow {
    background-color: #000000;
    color: #ffffff;
    display: inline-block;
    margin-right: 10px;
    padding: 2px 5px;
    text-align: center;
    vertical-align: top;
    width: 20px;
}

Comments