Factorisation en jquery

**jejeman** · 24/04/2012, 18h44

Bonjour,

Je cherche à réaliser des affcihage show/hide avec jquery. Je précise que je débute avec jquery.
J'ai trouvé ceci :

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
18
19
20
21
22
	<script type="text/javascript">
		<!--
		$(document).ready(function() {
			var showText="Show the text";
			var hideText="Hide the text";
			$("#hide_this").before("<p><a href='#' id='toggle_link'>"+showText+"</a>");
			$('#hide_this').hide();
			$('a#toggle_link').click(function() {
				if ($('a#toggle_link').text()==showText) {
					$('a#toggle_link').text(hideText);
				}
				else {
					$('a#toggle_link').text(showText);
				}
				$('#hide_this').toggle('slow');
				// return false so any link destination is not followed
				return false;
			});
		});
		//-->
	</script>
	<div id="hide_this">le texte1</div>

Ca marche bien, sauf que c'est valable pour une seul élément et moi je voudrais faire une FAQ avec plusieurs questions qui seraient visible et qui afficheraient la réponse quand on clique dessus.
du coup je voudrais utiliser ce code en le factorisant un peu, mais je ne sais pas trop comment faire.
En gros, il faudrait passer une variable à ma fonction qui serait le id de l'élément et ensuite travailler sur cet id...
Merci pour votre aide.

**utopman** · 25/04/2012, 10h27

Bonjour , je t'ai fait un code que tu peux tester tel quel et dont tu peux t"inspirer pour ce que tu veux faire je pense.

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
18
19
20
21
22
23
24
25
26
27
28
29
30
<html>
    <head>
        <style>
        body{background-color:#555;margin:0px;}
        .panel{border:5px solid #eee;width:300px;height:200px;background-color:#ddd;margin:15px;}
        </style>
        <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
 
        <script>
            $(document).ready(
                function()
                {
                    $('.panel').click(
                        function()
                        {
                            $('.panel').slideDown();
                            $(this).slideUp();                        
 
                        }
                    );
                }
            );
        </script>
    </head>
    <body>
        <div class="panel">toto</div>
        <div class="panel">titi</div>
        <div class="panel">tutu</div>
    </body>
</html>

Cordialement

**jejeman** · 25/04/2012, 11h44

Merci beaucoup !
Je vais essayé de "jouer" avec ça....

Factorisation en jquery

jQuery

Discussions similaires

Partager

Partager