[JQUERY] Système de faq (cacher/afficher)

ChBoc

14 Sep 2006 à 13:07

bonjour,

J'essaye de mettre en place un système de faq avec Jquery mais je me confronte à un probleme.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="fr">
<head>
<title>faq</title>
<script type="text/javascript" src="http://jquery.com/src/jquery-latest.js"></script>

<script type="text/javascript">
$(document).ready(function() {
	$('dl.faq').hide();
	$('h3').click(function() {
        var answer = $(this).next();
        if (answer.is(':visible')) {
            answer.slideUp('medium');
        } else {
            answer.slideDown('slow');
        }
    });
    $('.faq').find('dd').hide();
    $('.faq').find('dt').click(function() {
        var answer = $(this).find('+dd');
        if (answer.is(':visible')) {
            answer.slideUp('medium');
        } else {
            answer.slideDown('slow');
        }
    });
});
</script>


</head>
<body>
<h2>titre</h2>
<h3>faq 1</h3>
<dl class="faq">
	<dt>question 1</dt>
	<dd>reponse 1</dd>
	<dt>question 2</dt>
	<dd>reponse 2</dd>
	<dt>question 3</dt>
	<dd>reponse 3</dd>
	<dt>question 4</dt>
	<dd>reponse 4</dd>
	<dt>question 5</dt>
	<dd>reponse 5</dd>
</dl>

<h3>faq 2</h3>
<dl class="faq">
	<dt>question 1</dt>
	<dd>reponse 1</dd>
	<dt>question 2</dt>
	<dd>reponse 2</dd>
	<dt>question 3</dt>
	<dd>reponse 3</dd>
	<dt>question 4</dt>
	<dd>reponse 4</dd>
	<dt>question 5</dt>
	<dd>reponse 5</dd>
</dl>
</body>
</html>

Lorsque je clique sur tous les éléments de la fad 1 ceux-ci passe audessus de la faq 2. (ça fonctionne bien sous IE)

Comment faire en sorte que la taille de la liste de définition augmente en fonction du nombre de question ouverte?
Modifié par ChBoc (14 Sep 2006 - 14:15)