Question javascript

[sim100]

Bonjour,

Je tombe sur ce site web -http://www.freeindex.co.uk/profile%28nic-international-ltd%29_149484.htm

Et je vois leur système de "Service Details", lorsque qu'on clique sur "View Details" la description apparait.

Donc en fait sur un de mes site j'ai la même chose , mais j'aime bien chez eux le fait que lorsqu'on clique sur "View Details", le titre devient en BOLD et le background de la ligne en gris.

Je ne connais pas le javascript mais me serait-il possible de faire la même chose ?

Mon code est simple :

Entre head et /head

<script language="javascript">
function bascule(elem)
	{
	etat=document.getElementById(elem).style.display;
	if(etat=="none"){document.getElementById(elem).style.display="block";}
	else{document.getElementById(elem).style.display="none";}
	} 
</script>

et pour l'affichage :

<?PHP
echo "<table width='100%' cellpadding='0' cellspacing='0'>";
					echo "<tr><td>TITRE</td><td align='right'>"; ?><a href="" onClick="bascule('boite1'); return false;"><u>(View Details)</u></a><?PHP echo "</td></tr>";
					echo "</table>";
					echo "<div id='boite1' style='display:none;'>DESCRIPTION</div>"; ?>

Voila, avec l'emplacement de mon TITRE et celui de ma DESCRIPTION

Si quelqu'un est costau en javascript

Merci beaucoup pour l'aide

 

[Oniris]

Et le css ?

(Parce que là évidemment ça ne fait rien...)

 

[SpeedAirMan]

J'suis loin d'être un as en JavaScript, mais j'ai 2 ou 3 notions : avec jQuery, tu as une... classe ? Fonction qui te permet de changer un style / ajouter / retirer une classe.
Il faut que tu regarde de ce côté, et c'est assez simple je crois.

 

[screuscreu]

J'suis loin d'être un as en JavaScript, mais j'ai 2 ou 3 notions : avec jQuery, tu as une... classe ? Fonction qui te permet de changer un style / ajouter / retirer une classe.
Il faut que tu regarde de ce côté, et c'est assez simple je crois.

$("#id").addClass("myClass"); (et removeClass / toggleClass)

 

[sim100]

Merci par contre tu l'insers comment dans le code

Merci encore

 

[SpeedAirMan]

@screuscreu : exactement ça (j'avais juste la flemme de chercher le snippet )


@sim100 : c'est (vraiment) très simple !
Tu trouveras qq exemples sur le net à coups sûr (+ de chances côté blogs anglo-saxons quand même).
D'ailleurs, le snippet de screuscreu te donne la soluce à 80%.

$("#id")

permet de sélectionner l'élément auquel tu veux ajouter la class (remplace #id par... div.nom-de-la-classe-a-selectionner ou par l'id.

addClass("myClass")

permet d'ajouter la classe myClass à l'élément sélectionné


Je cherchai un exemple que j'avais déjà repéré pour montrer ce que ça peut faire, et j'ai trouvé le tuto qui va avec.

L'exemple (qui claque grave quand même) : http://www.sohtanaka.com/web-design/examples/display-switch/
(et pourtant ça reste simple)

Le tuto (en anglais) : http://designm.ag/tutorials/jquery-display-switch/


... y'a plus qu'à adapter !

Merci par contre tu l'insers comment dans le code

Tu insères jQuery, et tu insères le bout de script une fois qu'il est fait (de préférence en appelant le fichier en bas de page pour optimiser la rapidité d'affichage)