Forumonic

Full Version: jQuery Collapsible Posts (Like Reddit)
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
[img=300]https://i.imgur.com/H5zK8tV.gif[/img]


Quick & easy version without cookie support. This tutorial requires jQuery!
I am using the postbit_classic template for example, you will need to repeat this tutorial for the postbit template to have it working on both views.

1. Creating the button. Navigate to the postbit_classic template and add this wherever you would like the collapse post button to be shown.
Code:
<span style="float:right"><i id="collapsecomment{$post['pid']}" class="fas fa-chevron-up" title="Collapse Post"></i></span>
If your theme is not using font-awesome, use:
Code:
<span style="float:right"><a id="collapsecomment{$post['pid']}">Collapse</a></span>

2. Defining the post. In the same template find the following:
Code:
<div class="post_content {$unapproved_shade}">
Replace with:
Code:
<div class="post_content {$unapproved_shade}" id="collapse{$post['pid']}">

3. Creating the function. Using a very simple toggle to change the display state and icon.
Code:
<script>
$("#collapsecomment{$post['pid']}").click(function() {
  $("#collapse{$post['pid']}").toggle( "slow", function() {
  });
});
</script>
If using font-awesome add in the same <script> tags:
Code:
$( "#collapsecomment{$post['pid']}" ).click(function() {
 $( this ).toggleClass( "fa-chevron-up" );
});
$( "#collapsecomment{$post['pid']}" ).click(function() {
 $( this ).toggleClass( "fa-chevron-down" );
});
If using the text version add in the same <script> tags:
Code:
$( "#collapsecomment{$post['pid']}" ).click(function() {
 $(this).text("Collapse");
});
$( "#collapsecomment{$post['pid']}" ).click(function() {
 $(this).text("Expand");
});
Cookies support will be added soon, strapped for time at the moment. Let me know if you have any problems. Smile
Any update on this Mate?
Hi pal sorry for the delay, I've been working overtime all week and my time has been extremely limited recently, I'll post the tutorial over this weekend. Smile
Tutorial added to OP. Smile