Create collapsable content sections using WordPress' the_content().
<div class="entry-content">
<?php the_content(); ?>
</div><!-- .entry-content -->
jQuery(document).ready(function($) {
$('#collapsable-content').slideToggle();
$('#collapsable-link a').click( function() {
$('#collapsable-content').slideToggle();
$(this).find('span').html('Show Less');
});
});
/* =BEGIN: Add Class to first Paragraph in WordPress the_content();
Source: http://wordpress.stackexchange.com/a/51682/28826
---------------------------------------------------------------------------------------------------- */
function first_paragraph($content){
// Finding the 1st p tag and adding a class.
$content = preg_replace('%<p([^>]+)?>%', '<p$1 class="intro">', $content, 1);
// Finding the 1st closing p tag and adding a div tag to the rest of the content so we can separate it.
$content = preg_replace('%</p>%', '</p> <div id="collapsable-content">', $content, 1);
// Appending content to the_content (closing the div tag). Source: http://wordpress.stackexchange.com/a/28268/28826
$content .= '</div> <p id="collapsable-link"><a href="#" class="read-more"><span>Read More</span></a></p>';
return $content;
}
add_filter('the_content', 'first_paragraph');