Simple jQuery Text Spoiler Reveal

Developer
Chris Steurer
Size
1,913 Kb
Views
14,168
  1. Simple jQuery Text Spoiler Reveal Previews
  2. Simple jQuery Text Spoiler Reveal HTML Codes
  3. Simple jQuery Text Spoiler Reveal CSS Codes
  4. Simple jQuery Text Spoiler Reveal JS Codes

How do I make an simple jquery text spoiler reveal?

A simple demonstration of revealing an element on click to display a hidden movie spoiler.. What is a simple jquery text spoiler reveal? How do you make a simple jquery text spoiler reveal? This script and codes were developed by Chris Steurer on 08 December 2022, Thursday.

Simple jQuery Text Spoiler Reveal Previews
IQ Test

Simple jQuery Text Spoiler Reveal - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple jQuery Text Spoiler Reveal </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div> <p>The movie ends when<span class="spoiler"> the credits start rolling<span>. </p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple jQuery Text Spoiler Reveal - Script Codes CSS Codes

.spoiler.hidden { visibility:hidden;
}
.revealPlaceHolder { font-size:0.85em; background:#efefef; margin:0.2em; padding:0.3em; text-align:center; color:#666;
}
.revealPlaceHolder:hover { background:#dbdbdb; cursor:pointer;
}

Simple jQuery Text Spoiler Reveal - Script Codes JS Codes

var $revealPlaceHolder = $('<span class="revealPlaceHolder"> Reveal Spoiler?<span>');
$(".spoiler").addClass("hidden");
$(".spoiler").before($revealPlaceHolder);
$(".revealPlaceHolder").click(function(){ $(this).hide(); $(this).next(".spoiler").removeClass("hidden")
});
Simple jQuery Text Spoiler Reveal - Script Codes
Simple jQuery Text Spoiler Reveal - Script Codes
Home Page Home
Developer Chris Steurer
Username stoypenny
Uploaded December 08, 2022
Rating 3
Size 1,913 Kb
Views 14,168
Do you need developer help for Simple jQuery Text Spoiler Reveal?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Chris Steurer (stoypenny) Script Codes
Name
Button Hover Effects
Product Hover Display Cards
A Pen by Chris Steurer
Simple Contact Cards
Social Icon Buttons
Responsive Menu
Realistic Buttons
Responsive Coupon Code Containers
Basic Lightbox
Sign Up Form with live validation
Create amazing Facebook ads with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!