Javascript

Résolu/Fermé
yasean - 5 mai 2011 à 18:16
 yasean - 6 mai 2011 à 01:02
Bonjour,

J'aimerai avoir de l'aide de votre part étant des experts en Javascript

Je suis débutant en javascript, j'ai envi de faire afficher et masquer une div par un simple clic cela me semblais bien simple et fonctionnel après avoir été tombé sur ce tutoriel
http://www.journaldunet.com/...

Le seul souci que j'ai rencontré était d'appliquer cet astus sur plusieur div listés par une boucle

Voila le code :

Le code
<style>
.clicTitre
{
border-color: #000000;
border-top: 1px solid;
border-left: 1px solid;
border-right: 1px solid;
border-bottom: 2px dashed;
background-color: #eeeeee;
}

.clicCacher
{
top: -20px;
position: relative;
text-align:right;
}

.contenant
{
display : block;
border: 1px solid #000000;
}
</style>

<script>
function afficheId(baliseId)
{
if (document.getElementById && document.getElementById(baliseId) != null)
{
document.getElementById(baliseId).style.visibility='visible';
document.getElementById(baliseId).style.display='block';
}
}

function cacheId(baliseId)
{
if (document.getElementById && document.getElementById(baliseId) != null)
{
document.getElementById(baliseId).style.visibility='hidden';
document.getElementById(baliseId).style.display='none';
}
}

cacheId('contenu');
// si JavaScript est disponible, cache le contenu dès le
// chargement de la page. Sans JavaScript, le contenu sera
// affiché.
</script>

<div class="clicTitre">
<a href="javascript:afficheId('contenu')">Nous contacter</a>
</div>
<div class="contenant" id="contenu">
<div class="clicCacher">
<a href="javascript:cacheId('contenu');">Fermer</a>
</div>
Xavier Borderie<br>
Rédacteur Nouvelles Technologies<br>
<br>
Journal Du Net Développeurs / Benchmark Group <br>
4, rue Diderot <br>
92156 Suresnes CEDEX <br>
<a href="http://developpeurs.journaldunet.com"> http://developpeurs.journaldunet.com</a><br>
</div>

<div class="clicTitre">
<a href="javascript:afficheId('contenu')">Nous contacter</a>
</div>
<div class="contenant" id="contenu">
<div class="clicCacher">
<a href="javascript:cacheId('contenu');">Fermer</a>
</div>
Xavier Borderie<br>
Rédacteur Nouvelles Technologies<br>
<br>
Journal Du Net Développeurs / Benchmark Group <br>
4, rue Diderot <br>
92156 Suresnes CEDEX <br>
<a href="http://developpeurs.journaldunet.com"> http://developpeurs.journaldunet.com</a><br>
</div>




1 réponse

Utilisateur anonyme
5 mai 2011 à 21:10
salut,
c'est toi qui a bricolé ce code ou tu as juste fait un copier collé du code du site.
Je vois ce que tu veux faire cela dépend de comment tu veux que ce soit.
ça ne sert à rien de mettre le même "id" (contenu) sur des éléments différents.
chaque objet doit avoir un "id" unique. donc tu peux faire du genre contenu1,contenu2,......
0
Salut,

Premièrement merci pour ta réponse .
Pour le code j'ai fais du copier coller pour simplifier la tache pour les lecteurs , moi je fais un appel a un champs nom entreprise qui -en cliquant - nous affiche les information reliés a cet entreprise et tout ça dans une boucle qui retourne plusieurs entreprises a la fois .

si je parviens a résoudre le problème pour ce code je pourrais facilement l'appliquer dans mon code car je travail avec des boucle du CMS SPIP.
0
En faite ton idée marche bien mais je vois pas comment faire avec une boucle ?

voila mon code

<div class='ajax' width=50%>
<center>
<tr><div style="color:grey; font-size: 30px; font-weight: bold">Annuaire des sites</div></tr>
<BOUCLE_reponses(entreprise contient)
{contient.idcat=#ENV{idcat}}
{0,5}>


<style>
.clicTitre
{
border-color: #000000;
border-top: 1px solid;
border-left: 1px solid;
border-right: 1px solid;
border-bottom: 2px dashed;
background-color: #eeeeee;
}

.clicCacher
{
top: -20px;
position: relative;
text-align:right;
}

.contenant
{
display : block;
border: 1px solid #000000;
}
</style>

<script>
function afficheId(baliseId)
{
if (document.getElementById && document.getElementById(baliseId) != null)
{
document.getElementById(baliseId).style.visibility='visible';
document.getElementById(baliseId).style.display='block';
}
}

function cacheId(baliseId)
{
if (document.getElementById && document.getElementById(baliseId) != null)
{
document.getElementById(baliseId).style.visibility='hidden';
document.getElementById(baliseId).style.display='none';
}
}

cacheId('contenu');
// si JavaScript est disponible, cache le contenu dès le
// chargement de la page. Sans JavaScript, le contenu sera
// affiché.
</script>



<table border="2px">
<tr>
<div class="clicTitre">
<a href="javascript:afficheId('contenu')">#NOMENT</a>
</div>
</tr>
<tr>
<div class="contenant" id="contenu">
<div class="clicCacher">
<a href="javascript:cacheId('contenu');">Fermer</a>
</div>
<pre>
Adresse : #ADRESSE
<br>Ville : #VILLE
<br>Téléphone : #TEL
<br>Email : #EMAIL
</pre>
</div>
</tr>
<br><br>
<br><br>
<!-- <div id="log"></div>
<script>
$("button:first").click(function() {
$("pre:first").fadeToggle("slow", "linear");
});
</script>
-->





</BOUCLE_reponses>
0
ça marche enfin en mettant id="contenu #IDENT"

Merci pour l'idée ça m'as trop aidé!
0