How to Hide Spoilers in Your Reviews – Alternative Method

Last week I went over how to hide spoilers in your reviews. I’ve found that the first method works quite well for small in-line spoilers, but any time you want to hide big chunks of text, things tend to get wonky (sometimes when you click on “View Spoiler”, nothing happens!). So for cases like that, we’ll use an alternative method! Here’s what it looks like:

View Big Spoilers »

This is some kind of crazy huge spoiler! But it works even if you have images and large chunks of text! Check it out:

The Chaos of Stars

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas imperdiet dui id diam aliquam interdum. Praesent at metus lacus, a laoreet turpis. Donec adipiscing ante a ligula adipiscing id pharetra mauris laoreet. Quisque ligula libero, egestas et tincidunt at, eleifend vitae dolor. Nullam ornare gravida nibh, vitae pulvinar lacus ullamcorper adipiscing. Cras quis odio a ante aliquam ultricies. Phasellus viverra posuere quam, sit amet auctor mi sagittis sed. Phasellus consectetur ligula sed quam viverra hendrerit. Nullam dictum euismod magna a luctus.

Etiam nibh enim, dignissim at aliquet accumsan, porta sit amet diam. Donec id condimentum urna. Vestibulum ligula nulla, elementum nec placerat ut, pellentesque vitae mauris. Integer euismod tincidunt laoreet. Donec vel pharetra lacus. Phasellus congue rutrum mauris, vestibulum rutrum felis hendrerit et. Suspendisse potenti. Pellentesque vel justo suscipit eros pellentesque placerat egestas vel sapien. Maecenas ac orci ac elit fringilla tempor ac sed nisi. Praesent nec lorem lacinia dolor lacinia bibendum non ac risus.

Once again, I need to warn you that spoilers are made possible by using jQuery/JavaScript, but JavaScript is disabled in e-mails and RSS readers, which means the spoilers will be rendered out in plain text. So use this at your own risk!

WordPress

NOTE: This method requires editing your theme files, which means if you have a pre-made theme and have to update it, your changes could be overwritten.

Go to your blog admin panel and navigate to Appearance » Editor. On the right-hand side, look for the file functions.php (or Theme Functions) and click on it. After the <?php tag, paste this bit of code:

Note: This code assumes you have jQuery on your blog already. How can you check? Visit your blog homepage, right click and select “View Page Source”, and do a CTRL+F search for “jquery”. If you get no results, you do not have jQuery enabled. To enable it, copy the first part of the code on my first tutorial and paste it before this code.
// jQuery Big Spoiler Function
function add_big_spoilers() {
	echo '
		<script type="text/javascript">
		$(document).ready(function() { 
			
			$(\'div.bigspoiler > div\').hide();
			$(\'div.bigspoiler > a\').click(function() {
				$(this).next(\'div\').slideToggle(\'fast\')
				.siblings(\'div:visible\').slideUp(\'fast\');
			});

		}); 
		</script>

		<style>
			/* If you want you can add custom CSS here for the spoilers!  Below is what I use on my blog. */
			.bigspoiler > a:hover { cursor:pointer; }
			.bigspoiler div { background-color:#FCE586; }
		</style>
	';
}
add_action('wp_head', 'add_big_spoilers');

// Spoiler Shortcode
function big_spoiler_shortcode( $atts, $content = null ) {
	extract(shortcode_atts(array(
		'title' => 'View Spoilers &raquo;'
	), $atts));
	
	$output = '<div class="bigspoiler"><a>' . $title . '</a><div>';
	$output .= do_shortcode($content);
	$output .= '</div></div>';
	
	return $output;
}

add_shortcode('bigspoiler', 'big_spoiler_shortcode');

I have included the same styling I used in the first spoiler method, but of course you can change it to suit your needs! Here’s how you would use this code:

[bigspoiler title="Click to view spoilers"]Your spoiler goes in here![/bigspoiler]

Blogger

Go to your blog admin panel, click on Layout, and Add a Gadget. Select “HTML/JavaScript”, and this is where we will paste our code. Leave the title blank! Then, paste this code inside the content box:

<script type="text/javascript">
	$(document).ready(function() { 
		
		$('div.bigspoiler > div').hide();
		$('div.bigspoiler > a').click(function() {
			$(this).next('div').slideToggle('fast')
			.siblings('div:visible').slideUp('fast');
		});

	}); 
</script>

Note: You need jQuery on your blog in order to make this work. If you’re not sure, visit your blog homepage, right click and select “View Page Source”, and do a CTRL+F search for “jquery”. If you get no results, you need to add it to your blog. Do that by adding this BEFORE the code we wrote above:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>

Then, here’s how you can add the spoiler to your blog:

<div class="bigspoiler">
<a>Click to view spoiler!</a>
<div>
All your spoilers go in here!  You can put HTML, images, or anything you want in here!
</div>
</div>
Photo of Ashley
I'm a 30-something California girl living in England (I fell in love with a Brit!). My three great passions are: books, coding, and fitness. more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

You might like these

10 comments

  1. Hi Ashley, I used this code in my old theme. I just changed my theme to the Tweak Me V2 and realise that all my spoilers are showing 🙁 Is there an easier way to add this code to my Tweak Me theme without going into functions file or do I have to?

    1. Can you send me a link to one of your posts where you’ve used it and it’s not working?

          1. Sorry Ashley, I was just asking if there was somewhere else I can add the code instead of going into the functions.php. Thing is with my last theme I used a child theme so my changes weren’t overwritten by any theme updates. But in this case I don’t know if I can use a child theme. Can I? I don’t want to lose my changes to the functions.php if you do an update to the tweak me.

              1. Thanks for the tips. I really want the UBB but my husband would flip if he knew I just bought the tweak me theme. Trying to convince him to buy it for me for my birthday next month. lol.

  2. Hello I wondering if there’s anyway to have this spoiler display inline with the text. I tried your other spoiler tutorial but it didn’t work for some reason

  3. Thanks a lot! It works well.
    But I have a question. Is there any way to separate texts on the button?
    I mean how can I show “Show” button when the content is hidden and show “hide” button when the content is shown? Is there any way to do it? Appreciate your help.

Recent Posts

    Random Posts