Inline spoiler alternating visibility?

April 27, 2015, 12:04:44 pm

What would you think of a spoiler that instead of using a div in display block uses an inline element and instead of apply display:none changes the visibility of the content?

The main advantage would be that the text remains fully inline (unless otherwise done inside the block) and also the text around doesn't jump here and there revealing/hiding the spoiler.

I found this little piece for jquery:
http://stackoverflow.com/questions/9614622/equivalent-of-jquery-hide-to-set-visibility-hidden

The changes to the current system would be to add:

Code: [Select]

.spoiler,  .bbc_spoiler {
	display: inline;
}

to index.css
Then the bit of javascript:

Code: [Select]

jQuery.fn.toggleVisibility = function() {
    return this.css('visibility', function(i, visibility) {
        return (visibility == 'visible') ? 'hidden' : 'visible';
    });
};

somewhere always present (probably elk_jquery_plugins.js).

And finally change:

Code: [Select]

$(this).next().children().slideToggle("fast");

to:

Code: [Select]

$(this).next().children().toggleVisibility();

in both topic.js and theme.js

Last little tweak should be to remove the border from the variant css:

Code: [Select]

.spoiler {
	border: 1px solid #ccc;
	padding: 0.3em;
	background-color: #eee;
}

to:

Code: [Select]

.spoiler {
	padding: 0.3em;
	background-color: #eee;
}

Re: Inline spoiler alternating visibility?

Reply #1 – April 27, 2015, 03:25:24 pm

Quick fiddle, I think I messed it up though !

https://jsfiddle.net/rurx580o/

Re: Inline spoiler alternating visibility?

Reply #2 – April 27, 2015, 04:27:19 pm

Neat idea the fiddle!

Yup, that was basically what I was thinking to obtain (pretty much, I left the gray background in my example to highlight there is something somewhere... and because I'm completely dumb when it comes to styling LOL).