手动设置WordPress内容页实现内容的伸缩隐藏

我们是否看到有一些网站的内容，需要点击按钮可以伸缩显示，这个如何实现的呢？

JS内容部分：

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

功能代码：

    /* 展开和收缩功能 */
     
    function xcollapse($atts, $content = null){
    extract(shortcode_atts(array("title"=>""),$atts));
    return '
     
     '.$title.' 
     展开/收缩
     
     
     
     
    ';
    }
    add_shortcode('collapse', 'xcollapse');

选择伸缩内容：

    [collapse title="标题"]需点击展开的内容[/collapse]