Il faut surtout une meilleure structure sémantique. Là t'as les titres et les descriptif qui se suivent, il faut les regrouper. Genre dans la recommendation HTML4 sur les titres :
Citation :
A heading element briefly describes the topic of the section it introduces.
|
Note "section". Et section en HTML on utilise un div. Donc on peut s'orienter vers quelque chose comme ça :
Code :
- <div id="news">
- <h2>News</h2>
- <div class="news">
- <h3>Bidule <span class="date">5 janvier 2018</span></h3>
- <p class="desc">
- Lorem ipsum dolor sit amet...
- </p>
- </div>
- <div class="news">
- <h3>Machin <span class="date">8 février 2019</span></h3>
- <p class="desc">
- Ipsum sir dolor amet
- </p>
- </div>
- ...
- </div>
|
Note qu'une classe "titre" ne sert pas à grand chose, la balise hX l'indique déjà.
Niveau PHP, y'a un grave problème, tu n'escapes pas les données. On peut injecter du code HTML comme on veut. Si ce n'est pas voulu (genre si t'as un éditeur type tinyMCE ou FCKmachin), faut protéger tout ça :
Donc htmlspecialchars partout.
Ensuite niveau JavaScript ça devient trivial, surtout avec JQuery. D'abord on planque les descriptif (très important de faire ça en script et pas en CSS. Pour les JavaScript désactivés, on laisse le texte affiché.
On stocke le descriptif de la news dans une variable, puis dans le click du titre, on "toggle" ce descriptif :
Code :
$(document).ready(function() { $('#news .news').each(function(i, news) { var desc = $(news).find('.desc'); desc.hide(); $(news).find('h3').click(function() { desc.toggle(); }); }); });
|
Et voilà
Message édité par FlorentG le 02-05-2009 à 11:28:35