Salutations,Plier/déplier seulement le div que je sélectionne au lieu de tous?
Je suis un débutant qui vient de commencer avec jQuery. Je construis une application PHP de base pour notre équipe qui affiche une liste de tickets d'assistance ouverts.
Pour éviter d'encombrer l'écran, je veux seulement afficher le titre du ticket et si on clique dessus, sa description.
Voici mon code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Animate my Div</title>
<style type="text/css" media="screen">
a { text-decoration: none; }
#expand { background-color: #fff; }
#mydiv { display: none; }
</style>
<script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function(){
$("a").click(function(){ $("div").slideToggle(1000); });
}); </script>
</head>
<body>
<?php
$con = mysql_connect("korg", "joe", "bob");
if (!$con) { die('Could not connect: ' . mysql_error()); }
mysql_select_db("wfr11", $con);
$result = mysql_query(" select title, description from webcases");
while ($row = mysql_fetch_array($result)) {
?>
<p><a href="#expand"><?php echo $row['title']; ?></a></p>
<div id="mydiv"><?php echo $row['description']; ?></div>
<?php
} mysql_close($con); ?>
</body>
</html>
En ce moment, mes œuvres de code, mais se déploie tous les divs pour tous les billets ouverts, quel que soit le nom billet que je clique dessus.
Idéalement, j'aimerais montrer la description du nom du ticket sur lequel j'ai cliqué. Pas tous. C'est possible?
Merci pour votre aide.
@Orbling: votre solution a fonctionné comme un charme !! Tout ce que j'avais à faire était de créer deux classes CSS pour ".description {display: none;}" et "entry {margin: 0; padding: 0px;}". – Chris
Est-ce que this.parentS() est une meilleure suite puisqu'elle ne sélectionne pas l'élément racine? Un autre post ci-dessous suggère d'utiliser this.parent() ... quelqu'un peut-il expliquer? – Chris
'.parent()' obtient le parent immédiat d'un élément, tandis que '.parents (selector)' obtient tous les parents correspondant à un certain sélecteur. Si vous utilisez '.closest (selector)' qui fonctionne comme '.parents()' mais qui ne choisit que le premier ancêtre par opposition à tous les correspondants. La façon dont je l'ai configuré permet à la structure HTML de modifier un peu tout en conservant la fonctionnalité - en supposant qu'une ancre dans une classe 'entry' ait un élément avec la classe 'description' qui peut être glissé. – Orbling