WordPress文章页添加展开/收缩功能

效果：

效果预览

功能代码：

1、js

<script>jQuery(document).ready(
	function(jQuery){
	jQuery('.collapseButton').click(function(){
		jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
	});
});</script>

2、functions.php

function xcollapse($atts, $content = null){
	extract(shortcode_atts(array("title"=>""),$atts));
	return '<div style="margin: 0.5em 0;">
		<div class="xControl">
			<span class="xTitle">'.$title.'</span> 
			<a href="javascript:void(0)" class="collapseButton xButton">展开/收缩</a>
			<div style="clear: both;"></div>
		</div>
		<div class="xContent" style="display: none;">'.$content.'</div>
	</div>';
}
add_shortcode('collapse', 'xcollapse');

3、代码使用：

{collapse title="标题"}需点击展开的内容{/collapse}

将上述代码中的{}分别替换为[]

补刀：css 美化一下吧

.xControl {
padding-left: 32px;
}

2015-11-8 日更新：如何在编辑文章的时候快速添加该按钮呢？陌小雨博客（www.dedewp.com）给大家分享下面的好办法：

//添加展开/收缩快捷标签按钮
function appthemes_add_collapse() {if (wp_script_is('quicktags')){
?><script type="text/javascript">// <![CDATA[ 
QTags.addButton( 'collapse', '展开/收缩按钮', '{collapse title="说明文字"}','{/collapse}' );
// ]]></script><?php }} add_action('admin_print_footer_scripts', 'appthemes_add_collapse' );

将上述代码中的{}分别替换为[]

将上述代码添加到主题 functions.php 文件中，然后在编辑文章的时候切换到文本模式，就可以看到该按钮啦，是不是很编辑呢？

按钮使用方法：先单击一次，然后输入你想要收缩的内容，再单击一次按钮，然后替换替换其中的说明文字，什么是说明文字呢，就比如本文上面的加入到 body 之前和加入到主题 functions.php 文件中。