WebExamples/Collapsing modules.html at master · TurtleDynasty/WebExamples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="collapsing_modules.css">
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
</head>

<script type="text/javascript">
jQuery(document).ready(function() {
	//hide content box initially
 	jQuery(".box-content").hide();
 	//toggle the content box on click of title
	jQuery(".box-title").click(function()
	{
 		jQuery(this).next(".box-content").slideToggle(200);
	});
});
</script>

<div class="box-container">
	<div class="box-title">
		<h1>Title</h1>
	</div>
	<div class="box-content">
		<p>Come, Comrade Bender! We must take to the streets! Kids have names? When I was first asked to make a film about my nephew, Hubert Farnsworth, I thought "Why should I?" Then later, Leela made the film. But if I did make it, you can bet there would have been more topless women on motorcycles. Roll film! Well I'da done better, but it's plum hard pleading a case while awaiting trial for that there incompetence.</p>
		<p>I'm Santa Claus! Bender! Ship! Stop bickering or I'm going to come back there and change your opinions manually! And so we say goodbye to our beloved pet, Nibbler, who's gone to a place where I, too, hope one day to go. The toilet. Yeah. Give a little credit to our public schools. These old Doomsday Devices are dangerously unstable. I'll rest easier not knowing where they are.</p>
		<p>Actually, that's still true. Take me to your leader! I feel like I was mauled by Jesus. Please, Don-Bot&hellip; look into your hard drive, and open your mercy file! This is the worst part. The calm before the battle.</p>

	</div>
</div>

<div class="box-container">
	<div class="box-title">
		<h1>Title</h1>
	</div>
	<div class="box-content">
		<p>Fry! Stay back! He's too powerful! Son, as your lawyer, I declare y'all are in a 12-piece bucket o' trouble. But I done struck you a deal: Five hours of community service cleanin' up that ol' mess you caused. Hello Morbo, how's the family? Ven ve voke up, ve had zese wodies. My fellow Earthicans, as I have explained in my book 'Earth in the Balance'', and the much more popular ''Harry Potter and the Balance of Earth', we need to defend our planet against pollution. Also dark wizards.</p>
	</div>
</div>

<div class="box-container">
	<div class="box-title">
		<h1>Title</h1>
	</div>
	<div class="box-content">
		<p>It's just like the story of the grasshopper and the octopus. All year long, the grasshopper kept burying acorns for winter, while the octopus mooched off his girlfriend and watched TV. But then the winter came, and the grasshopper died, and the octopus ate all his acorns. Also he got a race car. Is any of this getting through to you? Oh sure! Blame the wizards! Yes! In your face, Gandhi! Fry, you can't just sit here in the dark listening to classical music. What kind of a father would I be if I said no? That's the ONLY thing about being a slave.</p>
	</div>
</div>
</html>