Report abuse

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
50
51
52
<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1‐transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta httpequiv="Content‐Type" content="text/html; charset=utf‐8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.js"
type="text/javascript" charset="utf‐8"></script>
<script type="text/javascript" charset="utf‐8">
// JavaScript Document
$(function(){
$('.show').hide(0);
$('h4.toogle').click(function(){
$(this).next().slideToggle();
$(this).toggleClass('open');
return false;
});
});
</script>
<style type="text/css">
h4 {
background:url(http://carosamigos.files.wordpress.com/2009/02/menos1.gif) no-repeat left 6px transparent;
clear:both;
cursor:pointer;
display:block;
font‐size:13px;
padding:0 0 0 20px;
}
h4.open {
background:url(http://carosamigos.files.wordpress.com/2009/02/mais1.gif) no-repeat left 6px transparent;
}
</style>
<title>Abrindo e fechando div com sinal de menos e de mais usando Jquery </title>
</head>
<body>
<div id="container">
<div class="duvidas‐box">
<div class="pergunta">
<h4 class="toogle">Pergunta</h4>
<div class="show">
<p>Resposta<br /></p>
</div>
</div>
<div class="pergunta">
<h4 class="toogle">Pergunta</h4>
<div class="show">
<p>Resposta<br /></p>
</div>
</div>
</div>
</div>
</body>
</html>