jQuery Collapsible Posts (Like Reddit)

Offline

Admin
#1
[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
Offline

Valued Member
#2
Any update on this Mate?
Offline

Admin
#3
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
Hi
Offline

Admin
#4
Tutorial added to OP. Smile

You may also be interested in...
Font-Awesome Like button with jQuery by Harry KLast Post: Harry K




Users browsing this thread: 1 Guest(s)