MyBB

Joey_Pham423

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

Omar G. · 2023-12-12, 01:52 AM

Seems nice, thanks for your contribution !

Joey_Pham423 · 2023-12-12, 10:16 PM

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

Thank you, I appreciate it. Means a lot Smile

HLFadmin · 2023-12-12, 10:26 PM

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

Joey_Pham423 · 2023-12-13, 06:33 AM

(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

RGX9x7

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

bv64 · 2024-01-20, 10:08 PM

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

RGX9x7

(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

Joey_Pham423 · 2024-01-21, 08:54 AM

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

Login
Username:
Password:	Lost Password?
	Remember me