11540 sujets

JavaScript, DOM et API Web HTML5

Afficher un article lors du clic

Salut tout le monde,

Je disais récemment sur le topic dédié à mon site qu'il faudrait que je trouve un système de pagination. Je pense avoir une idée, mais il faudrait du JS, chose que je ne maitrise pas le moins du monde (c'est partiellement faisable en CSS3 mais pas complètement).

En fait, je voudrais laisser le journal de liens (#journal) et le premier vrai article (#content article:nth-child(2)), et je voudrais, pour tous les autres articles, n'afficher que le titre et la date (autrement dit, article header), puis lors du clic sur le titre, afficher le contenu de l'article.

La grande question est donc : comment faire au niveau JS ?

Merci d'avance à tous ceux qui pourront m'aider !

Stéphane
Salut Stephanelam,
tu peux créer une fonction unique dont les méthodes sont un peu complexes, et qui au click va faire apparaître de façon alternée le détail de tes articles; toutefois tes articles recevront préalablement en .css un class en display:none, et javascript le modifiera provisoirement en display:inline-block

Voici :

css

.article{display:none; position:absolute; background-color:#eee; padding:6px; border:1px solid #ccc}


js
function alterne(id)
{
this.modiff = 'inline-block';	// ici on modifie l'attribut d'un id lorsqu'un évènement se produira
this.id=id;
if (typeof this.machintruc=='undefined' || this.machintruc=='')
{
document.getElementById(this.id).style.display = this.modiff;
this.machintruc=this.id;
}
else
{
if (this.id!=this.machintruc)
{
document.getElementById(this.id).style.display = this.modiff;
document.getElementById(this.machintruc).style.display = 'none';
this.machintruc = this.id;
}
}
}


Je te laisse écrire le html correspondant comme suit :

<div>
<span class="titre" onclick="alterne(article-1)">
Titre et date de l'article 1
</span>
<br />
<span class="article" id="article-1">
Blabla bla blabla bla
</span>
</div>

<div>
<span class="titre" onclick="alterne(article-2)">
Titre et date de l'article 2
</span>
<br />
<span class="article" id="article-2">
Blabla bla blabla bla
</span>
</div>

<div>
<span class="titre" onclick="alterne(article-3)">
Titre et date de l'article 3
</span>
<br />
<span class="article" id="article-3">
Blabla bla blabla bla
</span>
</div>


Un 
<body onload="alterne(article-1)">
fera apparaître le premier article à l'ouverture de la page. A toi d'ajuster le class .article selon ta mise en page (attention que l'apparition d'un article n'oblitère l'accès aux titres : l'ergonomie risque de s'avérer redoutable!)... et éventuellement d'appliquer à chaque article une autre fonction js afin de le faire disparaître au click pour ne laisser finalement à l'écran que les titres :
js
function none(id)
{document.getElementById(id).style.display = none}

html

<div>
<span class="titre" onclick="alterne(article-1)">
Titre et date de l'article 1
</span>
<br />
<span class="article" id="article-1" onclick="none(article-1)">
Blabla bla blabla bla
</span>
</div>

Modifié par zebulin (06 Sep 2012 - 04:30)
Sujet clos
Aller à