HTML très basique

[invite55202009]

Bonsoir tout le monde, je cherche un procédé html qui je suis sûr existe et est très facilement trouvable sur google, mais je crois avoir un problème de mot clé.

En fait ce que je veux faire, c'est par exemple j'ai ceci sur une page web :

-----------------------
Titre d'un film1
Titre d'un film2
Titre d'un film3
-----------------------
Lorsque je click sur "Titre d'un film1", je veux que le synopsis apparaissent en décalant le reste de la page :

-----------------------
Titre d'un film1

Synopsis lkdlkfldkflkdlfklkfldkflkdlfk
ldkflkldfkldkflkdlfkldkflkdlfk ldkfldklfk

Titre d'un film2
Titre d'un film3
-----------------------

Et lorsque je reclique dessus, la page revient comme elle était.

Je croyais que cela s'agissait d'un spoiler, mais tout ce que j'ai trouvé ne fait pas l'affaire parce que le texte ne fait qu'apparaître et disparaître sans décaler la page.

Merci de votre aide.
-----

[invite765732342432]

Un truc comme ça peut faire office:
En css:

 <style>
.relhidden{
display:none;
}&nbsp;
</style>

<script&nbsp;language="javascript">
function&nbsp;hideDiv(id){
var&nbsp;elem=document.getElementById(id);
if(elem){
elem.style.display='none';
}
}

function&nbsp;showDiv(id){
var&nbsp;elem=document.getElementById(id);
if(elem){
elem.style.display='block';
}
}&nbsp;
</script>
<div&nbsp;id="titre1"&nbsp;onclick="hideDiv('titre1');showDiv('titre1descr');">Titred'unfilm1</div>
<div&nbsp;id="titre1descr"&nbsp;class="relhidden"><a&nbsp;onclick="hideDiv('titre1descr');showDiv('titre1');">Titred'unfilm1</a><br>textedeladescrition</div>

<div&nbsp;id="titre2"&nbsp;onclick="hideDiv('titre2');showDiv('titre2descr');">Titred'unfilm2</div>
<div&nbsp;id="titre2descr"class="relhidden"><a&nbsp;onclick="hideDiv('titre2descr');showDiv('titre2');">Titred'unfilm2</a><br>textedeladescrition</div>&nbsp; 
 

Je ne garantis pas que ça marche du premier coup, mais ça doit être bon (attention, il risque d'y avoir des problèmes avec des navigateurs un peu vieux)

[invite765732342432]

Attention aux & nbsp; qui se sont rajoutés par-ci par-là...
J'ai pas tout compris à l'éditeur

[invite55202009]

Ça ne fonctionne pas et je ne comprends rien au javascript. En fait, le html a pas l'air de comprendre non plus parce qu'il affiche les définitions des deux fonctions.

Sinon est-ce qu'il a un nom pour ce genre de processus. Parce que je pourrais continuer à chercher.

[A voir en vidéo sur Futura]

[invite765732342432]

as tu remplacé les "& nbsp;" par un espace ?
Il faut le faire car ils se sont rajoutés après écriture de mon message.
Je vais essayer de te le mettre au propre:
[EDIT] Ca marche pas. toujours des espaces.
Normalement tu dois pouvoir t'arreanger avec ce que j'ai fait.

[invite1445654e]

il va falloir te mettre au javascript de nos jours je ne vois pas comment on peut faire du html sans faire du javascript et des CSS.
tu te créé une DIV comme a montré FAITH
et tu mets ton titre dans un SPAN avec un onchange dessus qui appelle une fonction javascript
tu recuperes l'état du div s'il est caché tu le montres et sinon tu fais l'inverse
rien de plus simple

[yoda1234]

as tu remplacé les "& nbsp;" par un espace ?
Il faut le faire car ils se sont rajoutés après écriture de mon message.
Je vais essayer de te le mettre au propre:
[EDIT] Ca marche pas. toujours des espaces.

As-tu essayé d'utiliser la balise "Code" ?

[invite765732342432]

As-tu essayé d'utiliser la balise "Code" ?

Ca marche mieux J'avais utilisé la balise PHP qui, visiblement, a un fonctionnement bien différent !
Merci...

<style>
.relhidden{
  display:none;
}
</style>

<script language="javascript">
function hideDiv(id){
  var elem=document.getElementById(id);
  if(elem){
    elem.style.display='none';
  }
}

function showDiv(id){
  var elem=document.getElementById(id);
  if(elem){
    elem.style.display='block';
  }
}
</script>
<div id="titre1" onclick="hideDiv('titre1');showDiv('titre1descr');">Titred'u nfilm1</div>
<div id="titre1descr" class="relhidden">
	<a onclick="hideDiv('titre1descr' );showDiv('titre1');">Titred'u nfilm1</a><br>
	textedeladescrition
</div>

<div id="titre2" onclick="hideDiv('titre2');showDiv('titre2descr');">Titred'u nfilm2</div>
<div id="titre2descr" class="relhidden">
	<a onclick="hideDiv('titre2descr' );showDiv('titre2');">Titred'u nfilm2</a><br>
	textedeladescrition
</div>

[invite55202009]

C'est dommage parce que le site ou je mets ma page ne supporte même pas ce code là . Mais il fonctionne très bien dans mon ordinateur.

[invite1445654e]

cela ne serait pas un site d'hebergement gratuit qui t'ajoute des bandeaux de pub ?

[invite55202009]

Je ne saurais trop dire, c'est un site qui ne m'appartient pas, et je ne fais que mettre à jour certaines de quelques pages avec WordPress. C'est WordPress qui limite les actions parce que je peux seulement avoir 4 tailles de polices par exemple.