germanny
5/30/2013 - 8:20 PM

Create collapsable content sections using WordPress' the_content().

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');