Jquery qui ne fonctionne pas ?

Invité · 03/07/2013, 14h40

Salut tout le monde,

J'ai deux fichiers :

faq.php :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<html>
    <head>
        <title>FAQ</title>
 
		<script src="effet.js"></script>
		<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 
		<style type="text/css">
                        #paragraphe{list-style:none;font-family:arial;font-size:18px;margin:0 auto;padding:0;width:500px;}
                        #paragraphe li{border-bottom:4px solid grey;position:relative;cursor:pointer;}
                        #paragraphe h2{font-family:arial;font-size:22px;}
                        #paragraphe p{font-family:arial;font-size:16px;display:none;}
                        #paragraphe span{position:absolute;right:5px;top:0;}
                </style>
    </head>
 
    <body>
 
		<ul id="paragraphe">
			<li>
					<h2>BONJOUR</h2>
					<span>+</span>
					<p> Ici notre contenu super pratique, avec effet jquery </p>
			</li>
			<li>
					<h2>BONJOUR2</h2>
					<span>+</span>
					<p> Ici notre contenu super pratique, avec effet jquery </p>
			</li>
		</ul>
    </body>
</html>

Et effet.js :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(document).ready(function ()  {
 
	$('#paragraphe li').click(function(){
 
		var text = $(this).children('p');
 
		if (text.is(':hidden')){
			text.slideDown('500');
			$(this).children('span').html('-');
		}
 
		else  {
			text.slideUp('300');
			$(this).children('span').html('+');
		}	
	});
});

J'aimerais donc que lorsque l'utilisateur clique sur bonjour ou bonjour2 le <p> juste en dessous s'affiche. S'il reclique, il disparait...

Malheureusement rien ne s'affiche quand je clique sur bonjour ou bonjour2.

Avez vous une idée ? Merci d'avance

Jquery qui ne fonctionne pas ?

jQuery

Mode arborescent

Discussions similaires

Partager

Partager