How to Expand/collapse WordPress posts with jQuery

  • I’m trying to integrate the jQuery code in this tutorial (https://wparena.com/how-to/how-to-expandcollapse-wordpress-posts-with-jquery/) so that the <!–more-> tag will expand the post within the page.

    I’ve tried adding this to my header.php file, but so far not working. 

    <script type="text/javascript">
$(document).ready(function() {
$(".post .entry-content").hide();?

$(".post").after("<div class='openIt' style='border-top: 1px solid #666; color: #036; text-align:right; cursor:pointer;'>Expand</div>");

$(".openIt").click(function() {
$(this).prev(".post").find(".entry").slideToggle("slow");
});

$(".openIt").toggle(function(){
$(this).html("Close")},
function(){
$(this).html("Expand")
});
</script>

    Am I making errors with syntax, or have I placed the javascript in the wrong place? Any help appreciated.

    Cheers,
    Martin White

Viewing 2 replies - 1 through 2 (of 2 total)

  • Have you included the jQuery library in your header?

    fabiano.cocozza

    (@fabianococozza)

    Hi everybody,
    the post is almost a year old and probably Kondwani have found another way to solve the problem. Anyway i post my solution, may be this could be helpful for someone else.

    first of all, erase the question mark at the end of the third line, then add a }); before the </scripts>

    now check if the code of your page have the same tags used in the javascript (in my case there were no class=”post” in the html).

    i post you my version of the script, which make the whole content collapse after the title.

    $(".entry-content").hide();

$(".entry-content").after("<div class='openIt' style='border-top: 1px solid #666; color: #036; text-align:right; cursor:pointer;'>Expand</div>");
$(".openIt").click(function() {
	$(".entry-content").slideToggle("fast");
	});

$(".openIt").toggle(function(){
	$(this).html("Close")},
	function(){
	$(this).html("Expand")
	});
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to Expand/collapse WordPress posts with jQuery’ is closed to new replies.