Forumonic
jQuery Collapsible Posts (Like Reddit) - Printable Version

+- Forumonic (https://forumonic.com)
+-- Forum: Forum (https://forumonic.com/f-Forum)
+--- Forum: Help Desk (https://forumonic.com/f-Help-Desk)
+--- Thread: jQuery Collapsible Posts (Like Reddit) (/p-jQuery-Collapsible-Posts-Like-Reddit)



jQuery Collapsible Posts (Like Reddit) - Harry K - 09-04-2018

[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


RE: jQuery Collapsible Posts (Like Reddit) - BunFunny - 27-07-2018

Any update on this Mate?


RE: jQuery Collapsible Posts (Like Reddit) - Harry K - 27-07-2018

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


RE: jQuery Collapsible Posts (Like Reddit) - Harry K - 30-07-2018

Tutorial added to OP. Smile