IPB 3.x is no longer officially supported by WebFlake. You can still seek peer-to-peer support in our new Legacy Support & Discussion forums. IPS Community Suite category is reserved solely for 4.x installations. We've also opened a new Legacy Software category that contains IPB 3.x, xenForo 1.4, vBulletin, and MyBB content.

You can hide this message after you've read it. Thanks!

Jump to content
Sign in to follow this  
Sanctuary

Simple jQuery Spoiler

Recommended Posts

Sanctuary    291

Here's a tutorial on how to create a simple jQuery spoiler. This tutorial assumes that you already have an HTML file ready to edit and have basic HTML knowledge, so I won't bother with those things.
Note: You will need jQuery for this code to work. If you don't already have jQuery installed, add inside your <head> tag.
 

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

 

First, let's get started with the HTML markup. What you'll need is something like this:

<div class="spoiler_wrap">
	<input type="button" value="Show" />
	<div class="spoiler_content">Here's some hidden content</div>
</div>

At first, it'll look something like this:

3741463203073aaf2.png

As you can see, the content isn't hidden like it's supposed to be, but that's because we haven't applied the CSS yet. Let's do that right now.

In your .css file, add this:

.spoiler_wrap input[type='button'] {
	color: #fff;
	background-color: #2C93FA;
	padding: 2px;
	border: 1px solid rgba(0, 0, 0, 0.1);
	border-radius: 2px;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3);
	cursor: pointer;
}

.spoiler_wrap .spoiler_content {
	display: none;
	margin-top: 5px;
	padding-left: 5px;
	border-left: 3px solid #2C93FA;
}

It should now look like this:

37414632036911c3c.png

Looks pretty good, right?

The next (and final) part of this tutorial would be the jQuery itself. Some of you may not know jQuery, so I'll leave some comments in the code to make things easier to understand.

$(document).ready(function() {

	// Once we click the spoiler button
	$(".spoiler_wrap input[type='button']").click(function() {
		// If the button's value is "Show", use the value "Hide"
		// But if it's not "Show", then change it back to "Show"
		var btn_txt = ($(this).val() == "Show") ? "Hide" : "Show";

		// Actually change the button's value
		$(this).val(btn_txt);
		
		// Go to HTML element directly after this button and slideToggle it
		$(this).next().stop().slideToggle();
	});

});

And you're done! Super easy, nice looking jQuery spoiler with just 3 pieces of code.

Here's what it looks like after being opened:

3741463204185f4aa.png

You can see that the button's text has been changed to "Hide" and that the content is now shown.

You can even copy/paste the HTML as many times as you want and create multiple spoilers! Like so:

3741463204430c229.png

Hope you found this useful!

Edited by Sanctuary
Updated with better code.
  • Upvote 1

Share this post


Link to post
Share on other sites
Sanctuary    291

Updated - I've updated the OP with better code! Less messy, and (if you ignore the comments and blank lines) it now uses almost half as many lines of jQuery! :D 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×