<div class="team-content"> <?php $content = apply_filters( 'the_content', get_the_content() ); $first_paragraph = substr($content, 0, strpos($content, "</p>")); echo $first_paragraph; // check if $content has more than one paragrah and if it does get content after first </p> if (substr_count($content, '<p>') > 1) { $remaining_paragraphs = substr($content, strpos($content, "</p>") + 4); ?> <div class="more-content" style="display: none;"> <?php echo $remaining_paragraphs; ?> </div> <div class="learn-more-toggle"><button class="learn-more" id="learnmore">Learn More</button></div> <script> jQuery(document).ready(function($){ $('#learnmore').click(function(){ $('.more-content').toggleClass('show'); $(this).text() == 'Learn More' ? $(this).text('Show Less') : $(this).text('Learn More'); }); }); </script> <?php } ?> </div>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter