怎么添加一个隐藏收缩文章，展开全文的按钮

站长每天边学习边分享~

美化版代码如下：

1.下方代码添加到 body 前

<!--为wordpress主题添加“内容展开/收缩”功能开始-->
<script>
jQuery(document).ready(
function(jQuery){
jQuery('.collapseButton').click(function(){
jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
});
});
</script>

2.找到主题的 functions.php文件 把代码放进去

/* 为WordPress添加“点击展开文章”功能开始 */
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></div></div></div>
<a href="javascript:void(0)" class="collapseButton xButton">点击展开文章 <i class="fa fa-angle-double-down"></i></a>

<div style="clear: both;"></div>
</div>
<div class="xContent" style="display: none;">'.$content.'</div>
</div>';
}
add_shortcode('collapse', 'xcollapse');

3.CSS美化代码

/* 文章展开文章按钮美化 */ 
.xControl {
  width:120px;height:25px;
  border-radius:20px;
  border:0px #ff6600 solid;
  background-color:#FFD637;  
  margin: 0 auto; text-align: center
}

4.怎么使用？

每次编辑文章的时候，添加下方代码:{}改成[]

{collapse title="文章收缩文字提示开始"}这里是隐藏的内容{/collapse}

效果: