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:
This is some kind of crazy huge spoiler! But it works even if you have images and large chunks of text! Check it out:
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:
// 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 »'
), $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
<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>
Thanks for sharing this tip! I would really like to include some plot events sometimes because it seems almost impossible to review a certain thing without giving something away! I’ll have to try this, glad there is a blogger version!
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?
Can you send me a link to one of your posts where you’ve used it and it’s not working?
Here’s the most recent post I have with spoilers.
It doesn’t look like you added the spoiler code to your theme anywhere?
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.
Okay well it’s normal for the spoiler code to not work at all until you add that in.
You could create a plugin for it instead ( https://codex.wordpress.org/Writing_a_Plugin#Creating_a_Plugin ). Or you could also use a child theme.
If it’s worth $35 for your time, you could also consider buying the Ultimate Book Blogger Plugin. That has the spoiler feature already built in.
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.
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
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.