Dear Team,

Please, can you help Implement the Epsilon Theme item description Read More... button  for category description read more?


Thank you

Here we are not big fans of category descriptions
But oretry sure there are many guides for this on stackoverflow, as once you have function to get description, its just css & js

Thank you very much.

Tried the function used for item description but it did not work.

Hi Team,

Sorry, I am able to display the category description with the function already.

The issue is that the category is a bit long so I would like to shorten it using ...Read more feature.

I also implemented the read more manually. But since this is a dynamic content, I am missing the connection even though I have seen that on item page for item description. I think I am not getting the function to do the read more for the category description right.

This code did the shortening
echo substr(strip_tags(@$cat['s_description']), 0, 720) . (strlen(strip_tags(@$cat['s_description'])) > 720 ? '...' : '');
This displayed the read more button: <a href="#" class="read-more-desc"><?php _e('Read more', 'epsilon'); ?> <i class="fas fa-angle-down"></i></a>
But then how to display the rest of the content after the Read more button is clicked is the problem.

@Smithtech
There are many ways.
We prefer something like this:
<div id="abox">
  <div class="short">short text <a href="#" class="readmore">Read more...</a></div>
  <div class="long">long text</div>
</div>

<script>
$('.readmore').click(function() {
  $(this).closest('.short').hide(0);
  $(this).closest('#abox').find('.long').show(0);
});
</script>


Than you very much for the support.

This code did the work. Just that it does not keep formatting

        <script>
function myCustomReadmoreFunction() {
  var dots = document.getElementById("dots");
  var moreText = document.getElementById("mycustomreadmore");
  var btnText = document.getElementById("myCustomReadmoreBtn");

  if (dots.style.display === "none") {
    dots.style.display = "inline";
    btnText.innerHTML = "Read more";
    moreText.style.display = "none";
  } else {
    dots.style.display = "none";
    btnText.innerHTML = "Read less";
    moreText.style.display = "inline";
  }
}
</script>
<?php echo substr(strip_tags(@$cat['s_description']), 0, 720) . (strlen(strip_tags(@$cat['s_description'])) > 720 ? '...' : ''); ?>
<span id="dots">...</span><span id="mycustomreadmore" style="display: none"  >
     
   </pr> <?php echo substr(strip_tags(@$cat['s_description']), 720, 9000020) . (strlen(strip_tags(@$cat['s_description'])) > 720 ? '' : ''); ?>
     </span>
     <button onclick="myCustomReadmoreFunction()" id="myCustomReadmoreBtn" class="btn btn-transparent">Read more</button>

If you remove strip_tags , all the content displays at once. The code doesn't work effectively. Aside that this code does the work just that the formatting is removed because of strip_tags

If your description is formatted (richedit/tinymce), you need strip tags here otherwise you may cut your formatted code in middle that will break page design.