MyBB Community Forums

Hi all,
I just want to share this MyCode I whipped up. It's pretty self-explanatory. I wrote this for my forum because I don't want to have posts that are too long. Sure, some people can say I could just use hide or spoiler plugins, but those completely hide the contents I believe. This one will work almost like an excerpt of a WordPress blog post, but for chosen parts of a post:

Demo: https://mybb.vn/Thread-test-test-more-ta...180#pid180

Let's get started:

1. Add this into your global.css:

/*Read More CSS*/

    .readmore {
      border: 1px solid #214f7e;
      background-color: #fdf6e3;
      transition: max-height 0.5s ease;
      overflow: hidden;
      max-height: 150px;
      width: 90%;
      margin: 10px auto;
      padding: 15px;
      border-left: 4px solid #214f7e;
      position: relative;
    }

    .readmore.expanded {
      max-height: none /* Set height to auto for expanded state */
    }

    .readmore-button-container {
    position: relative;
	color: #214f7e;
    border-bottom: 1px solid #214f7e;
    padding-bottom: 3px;
    margin: 0 0 10px 0;
    font-style: normal;
    font-weight: bold;
    }

    .readmore-button {
      margin-right: 10px;
    }
/*End Read More CSS */

2. Add this into your headerinclude template:

  <script>
    function toggleReadMore(button) {
      var content = button.closest('.readmore');
      content.classList.toggle('expanded');
      var readMoreButton = content.querySelector('.readmore-button');

      if (content.classList.contains('expanded')) {
        readMoreButton.innerHTML = "Read Less";
      } else {
        readMoreButton.innerHTML = "Read More";
      }
    }
  </script>

3. Add MyCode:
Regular expression:

\[more\](.*?)\[/more\]

Replacement:

  <div class="readmore">
    <div class="readmore-button-container">
      <button class="readmore-button" onclick="toggleReadMore(this)">Read More</button>
    </div>
    <p>$1</p>
  </div>

4. How to use:

[more] Your long, lengthy content here [/more]

Feel free to style or change it to fit your forum's needs. If there's enough request I can turn it into a simple plugin with some basic options. But for now, enjoy this MyCode tutorial Smile

Seems nice, thanks for your contribution !

(2023-12-12, 01:52 AM)Omar G. Wrote: [ -> ]Seems nice, thanks for your contribution !

Thank you, I appreciate it. Means a lot Smile

Looks nice. The internet demands it be called tl;dr instead of more. Big Grin

(2023-12-12, 10:26 PM)HLFadmin Wrote: [ -> ]Looks nice. The internet demands it be called tl;dr instead of more.

haha, We don't use tl;dr in Vietnam, but you're more than welcome to change it to that for your site lol

Hi,

Can someone help me please ?

All this code works fine with the "Default theme", but when i try with my "RoundoDarko Dark Theme", i have an error when i click on button "Read More"

showthread.php:308 Uncaught ReferenceError: toggleReadMore is not defined
    at HTMLButtonElement.onclick (showthread.php:308:70)
onclick @ showthread.php:308

Where is the error and how to solve it please ? Smile

Thanks for your work @Joey_Pham423

you didn't add the css to this styles CSS like written in post #1

(2024-01-20, 10:08 PM)bv64 Wrote: [ -> ]you didn't add the css to this styles CSS like written in post #1

Ok i found the error.

I need to add the block #2 at the top of in my "showthread" and "index" templates to works...

<html>
<head>

  <script>
    function toggleReadMore(button) {
      var content = button.closest('.readmore');
      content.classList.toggle('expanded');
      var readMoreButton = content.querySelector('.readmore-button');

      if (content.classList.contains('expanded')) {
        readMoreButton.innerHTML = "Lire -";
      } else {
        readMoreButton.innerHTML = "Lire +";
      }
    }
  </script>
...
...
...

First block #1 is already added in my global.css theme.

All is ok now Smile

thanks

that's odd, once you add the javascript in your headerinclude then it should work anywhere. But I'm glad you got it working

Joey_Pham423

Omar G.

Joey_Pham423

HLFadmin

Joey_Pham423

RGX9x7

bv64

RGX9x7

Joey_Pham423