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;
}