jQuery accordions and Wordpress Shortcode
I'm trying to get a jQuery accordion/tab Shortcode to look like this
[accordions]
[accordion title="Accordion 1"]Accordion 1 Content[/accordion]
[accordion title="Accordion 2"]Accordion 2 Content[/accordion]
[accordion title="Accordion 3"]Accordion 3 Content[/ac开发者_如何转开发cordion]
[/accordions]
I've tried many ways but I just cant seem to get it to work
How can this be done?
I haven't tested this code, but this should work:
function accordian_open_tag( $atts, $content='' ) {
return '<div class="accordion">{$content}</div>';
}
function accordian_section( $atts, $content='' ) {
$atts = shortcode_atts( array(
'title' => 'default title'
), $atts );
return "<h3><a href=\"#\">{$atts['title']}</a></h3>" .
"<div>{$content}</div>";
}
add_shortcode( 'accordians', 'accordian_open_tag' );
add_shortcode( 'accordian', 'accordian_section' );
You will need to run $(".accordian").accordian()
when the page is loaded for this to work.
<?php
// my shortcode like
/*
[accordion]
[section title="Your title #1" class="active" ]
Your Description here #1
[/section]
[section title="Your title #2"]
Your Description here #2
[/section]
[section title="Your title #3"]
Your Description here #3
[/section]
[/accordion]
*/
add_shortcode( 'section', 'section' );
function section( $atts, $content ){
extract(shortcode_atts(array(
'title' => 'Collapse',
'id' => false,
'class' => false,
), $atts));
$GLOBALS['section'][] = array(
'title' => $title ,
'id' => $id,
'class' => $class ,
'content' => $content ,
);
$id = "collapse-id-".$GLOBALS['collapsibles_count'];
foreach( $GLOBALS['section'] as $tab ){
$class = ( !empty($tab['class']) && $tab['class']=="active" ) ? "panel-collapse collapse in" : "panel-collapse collapse";
$__title = preg_replace('/[^a-zA-Z0-9._\-]/', '', strtolower($tab['title']) );
$return = sprintf( "\n".'<div class="panel panel-default"><div class="panel-heading"><h4 class="panel-title"><a data-toggle="collapse" data-parent="#%s" href="#%s">%s</a></h4></div><div id="%s" class="%s"><div class="panel-body">%s</div></div></div>'."\n",$id, $__title, $tab['title'], $__title, $class, $tab['content']);
} // foreach
return do_shortcode($return);
}// function ending
add_shortcode( 'accordion', 'accordion' );
function accordion( $atts, $content ){
if(isset( $GLOBALS['collapsibles_count'] )) {
$GLOBALS['collapsibles_count']++;
}else {
$GLOBALS['collapsibles_count'] = 0;
}
$id = "collapse-id-".$GLOBALS['collapsibles_count'];
return do_shortcode(sprintf('<div class="tp-accordion"><div class="panel-group" id="%s"> %s </div></div> ', $id, $content));
}
?>
wordpressshortcodebootstrap
精彩评论