Demo: http://sanc.pw/spoiler.html
Tutorial:
First, start off by making your basic HTML document layout.
Next, inside the <body> tags add your 2 elements for the spoiler - the button, and the content you want to hide.
Next, let's add the basic CSS to hide the contents of the spoiler inside the <head> tags.
Next is the jQuery code, to actually get the spoiler functioning. This also goes inside the <head> tags (usually above your <style> tags).
At this point, your document should look something like this:
So next, we'll add some CSS to make the button and hidden content look more attractive.
Remember, all CSS will go inside the <style> tags.
Your final result:
And your final code:
Hope you guys enjoyed this and found it useful.
Tutorial:
First, start off by making your basic HTML document layout.
Code:
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>Next, inside the <body> tags add your 2 elements for the spoiler - the button, and the content you want to hide.
Code:
<a href="#" id="spoiler">Show Text</a>
<p class="spoiler_contents">Quick, hide me!</p>Next, let's add the basic CSS to hide the contents of the spoiler inside the <head> tags.
Code:
<style type="text/css">
.spoiler_contents {
display: none; // This hides the spoiler content by default
}
</style>Next is the jQuery code, to actually get the spoiler functioning. This also goes inside the <head> tags (usually above your <style> tags).
Code:
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#spoiler").click(function() {
if ($(this).text() == "Show Text") { // If the button text is currently "Show Text"...
$(this).text("Hide Text"); // Change it to "Hide Text"
}
else {
$(this).text("Show Text"); // If anything else, simply make it "Show Text"
};
$(".spoiler_contents").slideToggle(); // Slide the spoiler contents up/down
});
});
</script>At this point, your document should look something like this:
So next, we'll add some CSS to make the button and hidden content look more attractive.
Remember, all CSS will go inside the <style> tags.
Code:
@import url(http://fonts.googleapis.com/css?family=Roboto); /* Google Font, to make things sexy */
#spoiler {
background-color: #E33535;
color: #fff;
padding: 10px;
font: normal 12px Roboto;
border-radius: 3px;
text-decoration: none;
}
.spoiler_contents {
display: none;
font: normal 14px Roboto;
margin-top: 15px;
}Your final result:
And your final code:
Code:
<!doctype html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
$("#spoiler").click(function() {
if ($(this).text() == "Show Text") { // If the button text is currently "Show Text"...
$(this).text("Hide Text"); // Change it to "Hide Text"
}
else {
$(this).text("Show Text"); // If anything else, simply make it "Show Text"
};
$(".spoiler_contents").slideToggle(); // Slide the spoiler contents up/down
});
});
</script>
<style type="text/css">
@import url(http://fonts.googleapis.com/css?family=Roboto); /* Google Font, to make things sexy */
#spoiler {
background-color: #E33535;
color: #fff;
padding: 10px;
font: normal 12px Roboto;
border-radius: 3px;
text-decoration: none;
}
.spoiler_contents {
display: none;
font: normal 14px Roboto;
margin-top: 15px;
}
</style>
</head>
<body>
<a href="#" id="spoiler">Show Text</a>
<p class="spoiler_contents">Quick, hide me!</p>
</body>
</html>Hope you guys enjoyed this and found it useful.
