Collapsible Text
#1
Is there any way to make collapsible text in this board? Meaning something like this:

[tag]Text that takes up way too much real estate[/tag]

becomes:

[TAG BUTTON]

(edit for clarity): And when clicked becomes:

[TAG BUTTON]
Text that takes up way too much real estate

This is often done with spoiler tags on other boards, but spoilers work differently here. I ask because I often post amazingly long and rambling posts, which often benefit from being segmented off by such a feature. I'll try to keep things short when asking for help or giving advice (if I am ever in a position where this is relevant) on the main crux of the board, tulpas. Need to keep communication clear, after all. In off-topic or other "just for fun" threads however, I might have more trouble keeping myself to task. Yes it's probably a bit of a self control issue, but I tend to be very exact and thorough when I talk.

If no such thing exists on this board I'll just have to deal with it, of course.
Reply

Sponsors:
Lolflash - click it, you know you want to

#2
There is no such feature here, but I think it would be a cool one. I made my own file format for geany so that I can keep my offline notes in collapsible format. Though I'm not really sure how much I'd use it here. It's an organizational thing for me.
"Some things have to be believed to be seen." - Ralph Hodgson
Reply
#3
Alright, thank you for answering my question.
Reply
#4
We were looking at that before, I think there's some plugin that'll allow it. I'll look into it after everything is situated with the server migration, just bump this topic after its been announced that we've migrated, to remind me.
Reply
#5
Something like this?

The tag is "hidden" because we're already using "spoiler", and I really intend this to be used for long text, not short snips. Please use the existing spoiler tag for short bits you want people to need to make an effort to see.

To use it:
Code:
[hidden]this text is hidden[/hidden]

I implemented it as a custom MyCode tag, no plugin needed. It's based on how the plugin works, but customized a bit and changed so it doesn't require anything outside the custom tag. Unlike the plugin you can't nest one hidden tag inside another. It also can't be themed, but that can be added easily enough.

In case anyone else using MyBB sees this and wants to use it:
Create a custom MyCode tag in Configuration-->MyCode-->Add New MyCode.

Regular expression: (Edit if you want the tag to be something else)
Code:
\[hidden\](.*?)\[\/hidden\]

Replacement:
Code:
<div style="padding:6px;border:1px solid black;"><div><a href="javascript:void(0);" onclick="javascript:if(parentNode.parentNode.getElementsByTagName('div')[1].style.display=='block'){parentNode.parentNode.getElementsByTagName('div')[1].style.display='none';}else {parentNode.parentNode.getElementsByTagName('div')[1].style.display='block';}"><strong>[HIDDEN]</strong></a> <font size=0><strong>&lt;-- Click to show/hide hidden text</strong></font></div><div style="display:none"><div style="padding:5px;border:1px dotted black;">$1</div><a href="javascript:void(0);" onclick="javascript:parentNode.parentNode.getElementsByTagName('div')[1].style.display='none';"><font size=1>(close hidden text)</font></a></div></div>

Note, the replacement is all on one line because otherwise MyBB will insert unwanted <br /> tags.
Reply
#6
Thank you, Chupi.

This isn't the first time this has been brought up, nice to see it's been added.
Reply
#7
Awesome, Chupi!
Reply
#8
Neuman Wrote:I ask because I often post amazingly long and rambling posts, which often benefit from being segmented off by such a feature.
People do post long, rambling posts without needing them.

Neuman Wrote:Need to keep communication clear, after all.
They may sometimes put a summary or "tl;dr" at the end, for those not wanting to read the longposts.

Anyhow, "hidden" section features tend to be accessibility nightmares in the majority of their implementations as far as them working without JavaScript enabled.
(Their meaner cousins "registered-only users", or "pay xx points" to view are far worse, but luckily they don't exist here yet).
They're still bad for accessibility even with JavaScript enabled - sometimes you want to expand all the hidden tags on sites that abuse them heavily and you have to click through a lot of them - or write some code to expand them for you!

It's worth noting that the forum/site degrades quite gracefully when JavaScript is off for most features, remaining still quite usable for most things (I don't recall when I had to enable JavaScript last time for it to work).


However, seeing as this system was implemented here, I could at least petition that the accessibility be improved (along with providing working example code, to save the site staff time):

It's usually better to have no "display:none" styles when first rendering the page(on anything the user may want to actually read), so that if JavaScript is disabled, it would still be displayed - then the script would hide them as needed at load time.

Here's my attempt at changing the code written by Chupi, with a few small additions to improve accessibility when JavaScript is turned off:

Code:
<div style="padding:6px;border:1px solid black;">
        <div style="display:none" class="jsonly">
                <a href="javascript:void(0);" onclick="javascript:if(parentNode.parentNode.getElementsByTagName('div')[1].style.display=='block')                               {parentNode.parentNode.getElementsByTagName('div')[1].style.display='none';}else {parentNode.parentNode.getElementsByTagName('div')[1].style.display='block';}"><strong>[HIDDEN]</strong></a>
                <font size=0><strong>&lt;-- Click to show/hide hidden text</strong></font>                
        </div>
        <div class="hiddentext">
                <div style="padding:5px;border:1px dotted black;">$1</div>
                <a href="javascript:void(0);" class="jsonly" style="display:none" onclick="javascript:parentNode.parentNode.getElementsByTagName('div')[1].style.display='none';">
                        <font size=1>(close hidden text)</font>
                </a>
        </div>

        <script type="text/javascript">
        (function(){
                if (typeof(document.getElementsByClassName) != 'undefined')
                {
                        var snode = document.documentElement;
                        while (snode.childNodes.length && snode.lastChild.nodeType == 1) snode = snode.lastChild;
                        var hiddendiv = snode.parentNode;

                        var jsonlyelements = hiddendiv.getElementsByClassName('jsonly');
                        for (var i = 0; i < jsonlyelements.length; ++i)                        
                                jsonlyelements[i].style.display = 'block';

                        hiddendiv.getElementsByClassName("hiddentext")[0].style.display='none';
                }
        })();
        </script>
</div>

or "minified":

Code:
<div style="padding:6px;border:1px solid black;"><div style="display:none" class="jsonly"><a href="javascript:void(0);" onclick="javascript:if(parentNode.parentNode.getElementsByTagName('div')[1].style.display=='block'){parentNode.parentNode.getElementsByTagName('div')[1].style.display='none';}else {parentNode.parentNode.getElementsByTagName('div')[1].style.display='block';}"><strong>[HIDDEN]</strong></a> <font size=0><strong>&lt;-- Click to show/hide hidden text</strong></font></div><div class="hiddentext"><div style="padding:5px;border:1px dotted black;">$1</div><a href="javascript:void(0);" class="jsonly" style="display:none" onclick="javascript:parentNode.parentNode.getElementsByTagName('div')[1].style.display='none';"><font size=1>(close hidden text)</font></a></div><script type="text/javascript">(function(){if (typeof(document.getElementsByClassName)!='undefined'){var s=document.documentElement;while(s.childNodes.length&&s.lastChild.nodeType==1)s=s.lastChild;var h=s.parentNode;var j=h.getElementsByClassName('jsonly');for (var i=0;i<j.length;++i)j[i].style.display='block';h.getElementsByClassName("hiddentext")[0].style.display='none';}})();</script></div>


What's changed?
  • Text is shown when JavaScript is disabled (by default)
  • "hiddentext" and "jsonly" classes added to simplify some of the code, and provide a class for user css to hook on, if someone wanted to change the default from "always hidden" to "always shown", or even have "always hidden" when javascript is off.
  • Links that require JavaScript to function: "[HIDDEN]" "Click to show/hide hidden text" "(close hidden text)" are only shown when JavaScript is enabled, otherwise style is set to "display:none".
  • A script is added after the 2 divs, which locates the parent div, and enables the links that require JavaScript (class "jsonly"), while hiding the content (class "hiddentext").

Other comments: anonymous function wrapper is there to prevent any environment/activation context pollution, the check for getElementsByClassName is there to have things degrade gracefully when in very ancient browsers (IE5-8, FireFox 2.x, and some really old versions of Opera (under 9.x)) which don't support looking up the class name without requiring a more resource intensive DOM walking - for those old browsers, hidden text works the same way that it would if JavaScript were off (although, other JavaScript features will work fine on those browsers, hence the graceful degradation of functionality).

Another way of implementing this would be to remove the last script block and simply provide a <noscript> block for the text that was hidden with "display: none" styles, however doing this means that the original text has 2 instances/copies in the generated page, which has implications for the bandwidth cost, especially if people were to abuse these hidden tags too much.

On the subject of bandwidth, regardless of which implementation one uses (original, my modified one, or one that uses a noscript tag), a MyCode version will always duplicate the code (styles and JavaScript) for each use, thus it'll be more costly than having it as part of the site's styles and static scripts (or just part of the theme), which do get cached - a plugin would handle this more efficiently, as far as bandwidth is concerned, however, please keep in mind, most implementations of "hidden" sections in forums have accessibility issues and may have to be tweaked to avoid them, although most of the time, tweaking isn't terribly hard, as can be seen above, and in a few other cases (contact me for other examples, or if you need any help with this).
Reply
#9
Thanks, NotAnonymous. I've changed the [hidden] MyCode to your minified one. I'm a programmer but I don't do web dev, so it's good having someone who knows it make it more compatible.

(07-09-2014, 05:40 AM)NotAnonymous Wrote: Anyhow, "hidden" section features tend to be accessibility nightmares in the majority of their implementations as far as them working without JavaScript enabled.
(Their meaner cousins "registered-only users", or "pay xx points" to view are far worse, but luckily they don't exist here yet).
They're still bad for accessibility even with JavaScript enabled - sometimes you want to expand all the hidden tags on sites that abuse them heavily and you have to click through a lot of them - or write some code to expand them for you!
I was somewhat inclined to argue against the feature because of the JavaScript issue, but it has its uses and most people have JavaScript on these days. We're never going to the "registered users only" or "paid" form. Those are truly idiotic.

Setting hidden tags to default to open or collapsed is a feature that a plugin could handle easily. It could add a setting to User CP.

(07-09-2014, 05:40 AM)NotAnonymous Wrote: It's worth noting that the forum/site degrades quite gracefully when JavaScript is off for most features, remaining still quite usable for most things (I don't recall when I had to enable JavaScript last time for it to work).
Yes. Having little JavaScript also makes it a lot more responsive on mobile and low-end devices.

(07-09-2014, 05:40 AM)NotAnonymous Wrote: Another way of implementing this would be to remove the last script block and simply provide a <noscript> block for the text that was hidden with "display: none" styles, however doing this means that the original text has 2 instances/copies in the generated page, which has implications for the bandwidth cost, especially if people were to abuse these hidden tags too much.
Given that it's for use with large passages, I think the extra few hundred bytes of code is preferable to duplicating the content. If it gets overused, we can move to something smaller like a plugin implementation, and/or discourage overuse.

(07-09-2014, 05:40 AM)NotAnonymous Wrote: a plugin would handle this more efficiently, as far as bandwidth is concerned
Would, but does not. All the MyBB spoiler plugins I can find just do a regex match-and-replace. The only reason they're plugins rather than custom tags is to allow things like [spoiler=Some Title], and maybe to make nesting work. So, we would need to completely roll our own plugin to do it that way. Desired features would be factoring out as much as possible from the code that's duplicated for each use, adding a User CP setting to default to expanded, and possibly add optional titles.

Even if nesting is possible by tweaking our current implementation, I don't think we want it. I don't see a reasonable use case, and every time I've seen them used they're just annoying, requiring multiple clicks to access content.
Reply
#10
Chupi Wrote:Thanks, NotAnonymous. I've changed the [hidden] MyCode to your minified one. I'm a programmer but I don't do web dev, so it's good having someone who knows it make it more compatible.
Thanks for the prompt response/update/fix. I don't really do that much web dev, but can do it if/when needed.

Chupi Wrote:We're never going to the "registered users only" or "paid" form.
That's great to hear!

Chupi Wrote:maybe to make nesting work
I haven't installed MyBB locally to test, but nesting did seem to work if the bbcode tag expansion is done recursively. I don't really see much point in nesting aside from maybe allowing hiding some quotes or something, but that sort of thing could get messy.

Chupi Wrote:Desired features would be factoring out as much as possible from the code that's duplicated for each use, adding a User CP setting to default to expanded, and possibly add optional titles.
A plugin that allows the user to configure it would indeed be the cleanest way to do it, although if bandwidth concerns are high, one can always just put all the styles in the theme CSS and the JavaScript in its own .js file, or simply in the <head> tag. Even without doing so, it would likely be possible to make the code much simpler using the already used by the forum, jQuery library, however at the cost of some slowdown as the hide/show/toggle functions do a little bit more than the current code that was used (as they're meant to be generically usable).
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)

Sponsors:
Lolflash - click it, you know you want to