[SHORTCODE] Spoiler content

Post Reply
User avatar
Fred
Legend Bludit
Posts: 236
Joined: Wed Jun 24, 2015 2:14 pm
Location: France
Contact:

Add spoiler content in Bludit.

In config Shorcode API plugin, add this lines:

Code: Select all

	// Add Shortcode {Spoiler titre='Spoiler' content='Spoiler content'}
	Shortcode::add('Spoiler', function($attributes) {
		// Extract attributes
		extract($attributes);
		// text
		if (isset($titre)) $titre = $titre; else $titre='Toggle content';
		if (isset($content)) $content = $content; else $content = 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.';
		// return
		return '<style>.spoiler-box{padding:5px;border:1px dotted #ddd;margin-top:5px;margin-bottom:5px;}.spoiler-close{background-color:#ddd;padding:0px 5px;float:right;}.spoiler-content{width:100%;padding:5px;}.spoiler-title{background-color:#777;color:#fff;width:100%;display:block;padding:5px;position:relative;}.spoiler-close,.spoiler-content{display:none;}.spoiler-box:focus .spoiler-content{display:block;}.spoiler-box:focus .spoiler-close{display:block;}</style>
<div class="spoiler-box" tabindex="1"><div class="spoiler-title">' .$titre. '<div class="spoiler-close" tabindex="2">close</div></div><div class="spoiler-content">' .$content. '</div></div>';
	});
Image
In page or post call spoiler by this line:

Code: Select all

{Spoiler titre='Click to view...' content='The spoiler content'}
Demo
╰☆╮Bludit╰☆╮ is a open source and community contributions are essential to project success!
You are looking for a light forum based Json? Try my project Flatboard, it is free. ;)
Sorry for my little english, i'm french :oops:
dirtdiver2010
Master Bludit
Posts: 129
Joined: Fri Jan 15, 2016 6:07 pm
Has thanked: 1 time
Been thanked: 3 times

I tried on mobile device (ipad) but the Demo did not work...
User avatar
Fred
Legend Bludit
Posts: 236
Joined: Wed Jun 24, 2015 2:14 pm
Location: France
Contact:

dirtdiver2010 wrote:I tried on mobile device (ipad) but the Demo did not work...
I don't have Ipad but Android phone and tablet, and work great for me...
╰☆╮Bludit╰☆╮ is a open source and community contributions are essential to project success!
You are looking for a light forum based Json? Try my project Flatboard, it is free. ;)
Sorry for my little english, i'm french :oops:
dirtdiver2010
Master Bludit
Posts: 129
Joined: Fri Jan 15, 2016 6:07 pm
Has thanked: 1 time
Been thanked: 3 times

If I touch the spoilers nothing happend...
Or is nothing inside? :mrgreen:
User avatar
Fred
Legend Bludit
Posts: 236
Joined: Wed Jun 24, 2015 2:14 pm
Location: France
Contact:

dirtdiver2010 wrote:If I touch the spoilers nothing happend...
Or is nothing inside? :mrgreen:
Do you have a work example without javascript/jQuery?
╰☆╮Bludit╰☆╮ is a open source and community contributions are essential to project success!
You are looking for a light forum based Json? Try my project Flatboard, it is free. ;)
Sorry for my little english, i'm french :oops:
dirtdiver2010
Master Bludit
Posts: 129
Joined: Fri Jan 15, 2016 6:07 pm
Has thanked: 1 time
Been thanked: 3 times

I only tried the demo... I did not use it in my own theme so far.
Post Reply