Réduire une catégorie en JQuery
Yop,
J'aimerais faire en sorte que sur chaque H2, il y ait un bouton "moins" qui permet d'effacer (avec animation) la div (qui est une catégorie de forum) qui se trouve juste en dessous visuellement parlant.
En gros voici l'html :
<div id="div">
<table cellspacing="0">
<h2>Titre de la catégorie <div id="reduire"></div><div id="agrandir"></div></h2>
<div id="cat">
<tr class="titre">
<th class="nom_forum">Nom du forum</th>
<th class="stats_index">Statistique</th>
<th class="moderateur">Modérateur</th>
<th class="last_post">Dernier post</th>
</tr>
<tr id="contenu" "class="impair">
<td class="nom_forum"><a href="forum-2-Avis.html">Avis</a><br /><i><span class="description">Vos avis nous sont important</span></i></td>
<td class="stats_index">Il y a 3 topic(s)<br />comprenant 7 post<br />vu 2 fois.</td>
<td class="moderateur"><a href="profile.php?id=1"><span style="color:#FF0000">WinuX</span></a>, <a href="profile.php?id=2"><span style="color:#00FF00">Stevens</span></a></td>
<td class="last_post"><div id="miniature"><img class="miniature" src="http://localhost/WinuX-BB/image/avatars/2.jpg"/></div><span class="text_last_post"><a href="topics.php?id=2">Nouveau design</a></span><br /><span class="text_last_post">posté par <a href="profile-2-Stevens.html"><span style="color:#00FF00">Stevens</span></span></a><br /><span class="text_last_post"><a href="topics.php?id=2#2">Mardi 08 Février 2011 à 16h02:49</a></span></td>
</tr>
<tr id="contenu" "class="pair">
<td class="nom_forum"><a href="forum-1-Reglement.html">Reglement</a><br /><i><span class="description">Les regles du forums</span></i></td>
<td class="stats_index">Il y a 2 topic(s)<br />comprenant 4 post<br />vu 1 fois.</td>
<td class="moderateur"><a href="profile.php?id=1"><span style="color:#FF0000">WinuX</span></a></td>
<td class="last_post"><div id="miniature"><img class="miniature" src="http://localhost/WinuX-BB/image/avatars/1.jpg"/></div><span class="text_last_post"><a href="topics.php?id=1">Reglement</a></span><br /><span class="text_last_post">posté par <a href="profile-1-WinuX.html"><span style="color:#FF0000">WinuX</span></span></a><br /><span class="text_last_post"><a href="topics.php?id=1#1">Mardi 08 Février 2011 à 16h02:24</a></span></td>
</tr>
</div></table></div>
<div id="div">
<table cellspacing="0">
<h2>Titre de la catégorie N°2 <div id="reduire"></div><div id="agrandir"></div></h2>
<div id="cat">
<tr class="titre">
<th class="nom_forum">Nom du forum</th>
<th class="stats_index">Statistique</th>
<th class="moderateur">Modérateur</th>
<th class="last_post">Dernier post</th>
</tr>
<tr id="contenu" "class="impair">
<td class="nom_forum"><a href="forum-3-Cafe.html">Café</a><br /><i><span class="description">venez boire un vers :P</span></i></td>
<td class="stats_index">Il y a 1 topic(s)<br />comprenant 1 post<br />vu 8 fois.</td>
<td class="moderateur"><a href="profile.php?id=1"><span style="color:#FF0000">WinuX</span></a></td>
<td class="last_post"><div id="miniature"><img class="miniature" src="http://localhost/WinuX-BB/image/avatars/2.jpg"/></div><span class="text_last_post"><a href="topics.php?id=2">Nouveau design</a></span><br /><span class="text_last_post">posté par <a href="profile-2-Stevens.html"><span style="color:#00FF00">Stevens</span></span></a><br /><span class="text_last_post"><a href="topics.php?id=2#2">Mardi 08 Février 2011 à 16h02:49</a></span></td>
</tr>
<tr id="contenu" "class="pair">
<td class="nom_forum"><a href="forum-4-Jeux-trop-con.html">Jeux trop con</a><br /><i><span class="description">bande de floodeur</span></i></td>
<td class="stats_index">Il y a 1 topic(s)<br />comprenant 1 post<br />vu 10 fois.</td>
<td class="moderateur"><a href="profile.php?id=2"><span style="color:#00FF00">Stevens</span></a></td>
<td class="last_post"><div id="miniature"><img class="miniature" src="http://localhost/WinuX-BB/image/avatars/1.jpg"/></div><span class="text_last_post"><a href="topics.php?id=1">Reglement</a></span><br /><span class="text_last_post">posté par <a href="profile-1-WinuX.html"><span style="color:#FF0000">WinuX</span></span></a><br /><span class="text_last_post"><a href="topics.php?id=1#1">Mardi 08 Février 2011 à 16h02:24</a></span></td>
</tr>
</div></table></div>On laisse tomber le css, en gros j'aimerais que toutes les div avec pour id "agrandir" soit invisible (donc une fonction hide()), et que lorsque je clique sur la div "reduire", il se passe ceci :
- La div cat (qui est juste en dessous) s'efface petit à petit en remontant vers le haut, et en 0.5secondes
- La div reduire s'efface pour laisser place à la div agrandir qui apparait
Et inversement, lorsqu'on cliquera sur la div agrandir, la div cat (qui est juste en dessous):
- La div cat (qui est juste en dessous) apparait petit à petit en descendant vers le bas, et en 0.5secondes
- La div agrandir s'efface pour laisser place à la div reduire qui apparait
La théorie c'est bon, maintenant la pratique, et c'est là que ca pose problème. J'ai le début (qui est forcement faux), et j'aimerais compter sur votre aide pour corriger tout ça :
$(document).ready(function(){
var moins = $('#reduire');
var plus = $('#agrandir');
plus.hide();
moins.click(function(){
$(this).next('#cat').hide();
moins.hide();
plus.fadeIn();
});
plus.click(function(){
$(this).next('#cat').hide();
plus.hide();
moins.fadeIn();
});
});J'espère que ce problème ne va pas vous faire fuir :P
Cordialement, WinuX
4 réponses
Yop,
En attendant j'ai cherché et justement comme toi, j'ai modifié la partie html. J'ai sorti la div cat et le h2 des balises "table".
J'pourrais effectivement attribuer la class cat à la balise <table>, et d'ailleurs j'vais le faire ^^
Alors ca fonctionne plus ou moins bien :
var moins = $('.reduire');
var plus = $('.agrandir');
plus.hide();
moins.click(function(){
$(this).parents('h2').next('.cat').slideDown(250);
$(this).hide();
$(this).parents('h2').find(".agrandir").show();
});
plus.click(function(){
$(this).parents('h2').next('.cat').slideUp(250);
$(this).hide();
$(this).parents('h2').find(".reduire").show();
});Cependant, ya toujours un piti problème..
L'animation se fait sans problème, mais seulement à partir du 2eme click.
En gros, je click une 1ere fois, le - disparait pour laisser place au +, et ensuite je reclick la catégorie "s'efface vers le haut", le + disparait et le moins apparait.
Et ça le fait pour toutes les catégories.
fin bon, c'est déjà un bon début là x)
EDIT : Problème réglé, fallait juste inverser les fonction slideUp et Down xD
var moins = $('.reduire');
var plus = $('.agrandir');
plus.hide();
moins.click(function(){
$(this).parents('h2').next('.cat').slideUp(750);
$(this).hide();
$(this).parents('h2').find(".agrandir").show();
});
plus.click(function(){
$(this).parents('h2').next('.cat').slideDown(750);
$(this).hide();
$(this).parents('h2').find(".reduire").show();
});Ps : Nice l'ajax pour l'édition des post, yen a un qui boss sur le code du forum à ce que j'vois :P
$(document).ready(function(){
var moins = $('#reduire');
var plus = $('#agrandir');
plus.hide();
moins.click(function(){
$(this).next('#cat').slideDown(500);
$(this).hide();
$(this).parents('table').find("#agrandir").show();
});
plus.click(function(){
$(this).next('#cat').slideUp(500);
$(this).hide();
$(this).parents('table').find("#reduire").show();
});
});par contre juste une chose
dans les normes w3c les id doive être unique, donc je te conseil d'utiliser des class
Ah? C'est bon à savoir pour les id x)
Cependant, cela ne fonctionne toujours pas :/
J'ai modifié le code un peu :
var moins = $('.reduire');
var plus = $('.agrandir');
plus.hide();
moins.click(function(){
$(this).next('.cat').slideDown(500);
$(this).hide();
$(this).parents('h2').find(".agrandir").show();
});
plus.click(function(){
$(this).next('.cat').slideUp(500);
$(this).hide();
$(this).parents('h2').find(".reduire").show();
});(j'ai changé les div en class au passage). Avec ton bout de code, seul la première catégorie est prise en compte, et seul le - (div reduire) disparait, et c'est tout.
Avec mon bout de code, le moins se change en plus pour toutes les catégories, cependant, les catégories reste visible, la fonction slideDown et slideUp n'est pas du tout prise en compte..
tu a des " de trop pour les tr contenu
tes h2 sont à l'intérieur de la balise table sans être dans le tableau, et ça c'est pas cool :)
regarde le code dessous il fonctionne
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
<meta name="geo.region" content="FR" >
<meta content="fr" http-equiv="content-language" >
<meta name="robots" content="INDEX,FOLLOW,ALL" >
<meta http-equiv="Content-Style-Type" content="text/css" >
<meta http-equiv="Content-Script-Type" content="text/javascript" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var moins = $('.reduire');
var plus = $('.agrandir');
plus.hide();
moins.click(function(){
$(this).parents('h2').next('.cat').slideUp(500);
$(this).hide();
$(this).parents('h2').find(".agrandir").show();
});
plus.click(function(){
$(this).parents('h2').next('.cat').slideDown(500);
$(this).hide();
$(this).parents('h2').find(".reduire").show();
});
});
</script>
</head>
<body>
<h2>Titre de la catégorie <div class="reduire">reduire</div><div class="agrandir">agrandir</div></h2>
<table cellspacing="0" class="cat">
<tr class="titre">
<th class="nom_forum">Nom du forum</th>
<th class="stats_index">Statistique</th>
<th class="moderateur">Modérateur</th>
<th class="last_post">Dernier post</th>
</tr>
<tr class="contenu" class="impair">
<td class="nom_forum"><a href="forum-2-Avis.html">Avis</a><br /><i><span class="description">Vos avis nous sont important</span></i></td>
<td class="stats_index">Il y a 3 topic(s)<br />comprenant 7 post<br />vu 2 fois.</td>
<td class="moderateur"><a href="profile.php?id=1"><span style="color:#FF0000">WinuX</span></a>, <a href="profile.php?id=2"><span style="color:#00FF00">Stevens</span></a></td>
<td class="last_post"><div id="miniature"><img class="miniature" src="http://localhost/WinuX-BB/image/avatars/2.jpg"/></div><span class="text_last_post"><a href="topics.php?id=2">Nouveau design</a></span><br /><span class="text_last_post">posté par <a href="profile-2-Stevens.html"><span style="color:#00FF00">Stevens</span></span></a><br /><span class="text_last_post"><a href="topics.php?id=2#2">Mardi 08 Février 2011 à 16h02:49</a></span></td>
</tr>
<tr class="contenu" class="pair">
<td class="nom_forum"><a href="forum-1-Reglement.html">Reglement</a><br /><i><span class="description">Les regles du forums</span></i></td>
<td class="stats_index">Il y a 2 topic(s)<br />comprenant 4 post<br />vu 1 fois.</td>
<td class="moderateur"><a href="profile.php?id=1"><span style="color:#FF0000">WinuX</span></a></td>
<td class="last_post"><div id="miniature"><img class="miniature" src="http://localhost/WinuX-BB/image/avatars/1.jpg"/></div><span class="text_last_post"><a href="topics.php?id=1">Reglement</a></span><br /><span class="text_last_post">posté par <a href="profile-1-WinuX.html"><span style="color:#FF0000">WinuX</span></span></a><br /><span class="text_last_post"><a href="topics.php?id=1#1">Mardi 08 Février 2011 à 16h02:24</a></span></td>
</tr>
</table>
<h2>Titre de la catégorie N°2 <div class="reduire">reduire</div><div class="agrandir">agrandir</div></h2>
<table cellspacing="0" class="cat">
<tr class="titre">
<th class="nom_forum">Nom du forum</th>
<th class="stats_index">Statistique</th>
<th class="moderateur">Modérateur</th>
<th class="last_post">Dernier post</th>
</tr>
<tr class="contenu" class="impair">
<td class="nom_forum"><a href="forum-3-Cafe.html">Café</a><br /><i><span class="description">venez boire un vers :P</span></i></td>
<td class="stats_index">Il y a 1 topic(s)<br />comprenant 1 post<br />vu 8 fois.</td>
<td class="moderateur"><a href="profile.php?id=1"><span style="color:#FF0000">WinuX</span></a></td>
<td class="last_post"><div class="miniature"><img class="miniature" src="http://localhost/WinuX-BB/image/avatars/2.jpg"/></div><span class="text_last_post"><a href="topics.php?id=2">Nouveau design</a></span><br /><span class="text_last_post">posté par <a href="profile-2-Stevens.html"><span style="color:#00FF00">Stevens</span></span></a><br /><span class="text_last_post"><a href="topics.php?id=2#2">Mardi 08 Février 2011 à 16h02:49</a></span></td>
</tr>
<tr class="contenu" class="pair">
<td class="nom_forum"><a href="forum-4-Jeux-trop-con.html">Jeux trop con</a><br /><i><span class="description">bande de floodeur</span></i></td>
<td class="stats_index">Il y a 1 topic(s)<br />comprenant 1 post<br />vu 10 fois.</td>
<td class="moderateur"><a href="profile.php?id=2"><span style="color:#00FF00">Stevens</span></a></td>
<td class="last_post"><div class="miniature"><img class="miniature" src="http://localhost/WinuX-BB/image/avatars/1.jpg"/></div><span class="text_last_post"><a href="topics.php?id=1">Reglement</a></span><br /><span class="text_last_post">posté par <a href="profile-1-WinuX.html"><span style="color:#FF0000">WinuX</span></span></a><br /><span class="text_last_post"><a href="topics.php?id=1#1">Mardi 08 Février 2011 à 16h02:24</a></span></td>
</tr>
</table>
</body>
</html>