Bouton retour dans un texte caché

garancetosello · 14 Mars 2015

Bonjour,
Pourriez-vous m'aider svp ?
Je suis entrain de faire un texte caché "lire la suite" mais je n'arrive pas à faire le lien sur le bouton "retour"
quelqu'un pourrait m'aider svp ?
Site en cours de construction
http://www.votre-faire-part.com/test/index.html

CODE CSS

Code:

<script ="type/css">
#hidden {display:none}
</script>

CODE HTML

Code:

<div>
TEXTE
<a href="#nogo" onclick="document.getElementById('hidden').style.display = 'block'; this.style.display = 'none';">Lire la suite ... </a>      
      </div>
<div id="hidden" style="margin-left:150px;">
<img src="index/bouton-retour.gif" border="0" /><br/>
TEXTE CACHE
</div>

*******************************************************************************************************************************************

Encore une chose
Je voudrais faire un NOUVEAU deuxième texte caché sur la même page
Comment puis-je faire ?

Code:

<script ="type/css">
#hidden2 {display:none}
</script>

Code:

<div>
TEXTE
<a href="#nogo" onclick="document.getElementById('hidden2').style.display = 'block'; this.style.display = 'none';">Lire la suite ... </a>      
      </div>
<div id="hidden2" style="margin-left:150px;">
<img src="index/bouton-retour.gif" border="0" /><br/>
TEXTE CACHE
</div>

Je vous remercie par avance pour tout
Garance

concombre · 15 Mars 2015

salut,

Jquery est présent sur ta page, utilise le c'est plus simple.

PHP:

<span class="syntaxhtml"><span class="syntaxdefault"><br /></span><span class="syntaxkeyword"><!</span><span class="syntaxdefault">DOCTYPE&nbsp;html</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">html&nbsp;lang</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"fr"</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">head</span><span class="syntaxkeyword">><br />&nbsp;&nbsp;&nbsp;&nbsp;<</span><span class="syntaxdefault">style&nbsp;type</span><span class="syntaxkeyword">=</span><span class="syntaxstring">"text/css"</span><span class="syntaxkeyword">><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;.</span><span class="syntaxdefault">textmore</span><span class="syntaxkeyword">{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="syntaxdefault">display</span><span class="syntaxkeyword">:</span><span class="syntaxdefault">none</span><span class="syntaxkeyword">;<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br />&nbsp;&nbsp;&nbsp;&nbsp;</</span><span class="syntaxdefault">style</span><span class="syntaxkeyword">><br /></</span><span class="syntaxdefault">head</span><span class="syntaxkeyword">><br /><</span><span class="syntaxdefault">body</span><span class="syntaxkeyword">><br />&nbsp;&nbsp;&nbsp;&nbsp;<</span><span class="syntaxdefault">article&nbsp;</span><span class="syntaxkeyword">class=</span><span class="syntaxstring">'articlemore'</span><span class="syntaxkeyword">><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<</span><span class="syntaxdefault">h2</span><span class="syntaxkeyword">></span><span class="syntaxdefault">Article&nbsp;1</span><span class="syntaxkeyword"></</span><span class="syntaxdefault">h2</span><span class="syntaxkeyword">><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<</span><span class="syntaxdefault">p</span><span class="syntaxkeyword">></span><span class="syntaxdefault">Nec&nbsp;piget&nbsp;dicere&nbsp;avide&nbsp;magis&nbsp;hanc&nbsp;insulam&nbsp;populum&nbsp;Romanum&nbsp;invasisse&nbsp;quam&nbsp;iuste</span><span class="syntaxkeyword">.&nbsp;</span><span class="syntaxdefault">Ptolomaeo&nbsp;enim&nbsp;rege&nbsp;foederato&nbsp;nobis&nbsp;et&nbsp;socio&nbsp;ob&nbsp;aerarii&nbsp;nostri&nbsp;angustias&nbsp;iusso&nbsp;sine&nbsp;ulla&nbsp;culpa&nbsp;proscribi&nbsp;ideoque&nbsp;hausto&nbsp;veneno&nbsp;voluntaria&nbsp;morte&nbsp;deleto&nbsp;et&nbsp;tributaria&nbsp;facta&nbsp;est&nbsp;et&nbsp;velut&nbsp;hostiles&nbsp;eius&nbsp;exuviae&nbsp;classi&nbsp;inpositae&nbsp;in&nbsp;urbem&nbsp;advectae&nbsp;sunt&nbsp;per&nbsp;Catonem</span><span class="syntaxkeyword">,&nbsp;</span><span class="syntaxdefault">nunc&nbsp;repetetur&nbsp;ordo&nbsp;gestorum</span><span class="syntaxkeyword">.</</span><span class="syntaxdefault">p</span><span class="syntaxkeyword">><br /><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<</span><span class="syntaxdefault">p&nbsp;</span><span class="syntaxkeyword">class=</span><span class="syntaxstring">'textmore'</span><span class="syntaxkeyword">></span><span class="syntaxdefault">Saraceni&nbsp;tamen&nbsp;nec&nbsp;amici&nbsp;nobis&nbsp;umquam&nbsp;nec&nbsp;hostes&nbsp;optandi</span><span class="syntaxkeyword">,&nbsp;</span><span class="syntaxdefault">ultro&nbsp;citroque&nbsp;discursantes&nbsp;quicquid&nbsp;inveniri&nbsp;poterat&nbsp;momento&nbsp;temporis&nbsp;parvi&nbsp;vastabant&nbsp;milvorum&nbsp;rapacium&nbsp;similes</span><span class="syntaxkeyword">,&nbsp;</span><span class="syntaxdefault">qui&nbsp;si&nbsp;praedam&nbsp;dispexerint&nbsp;celsius</span><span class="syntaxkeyword">,&nbsp;</span><span class="syntaxdefault">volatu&nbsp;rapiunt&nbsp;celeri</span><span class="syntaxkeyword">,&nbsp;</span><span class="syntaxdefault">aut&nbsp;nisi&nbsp;impetraverint</span><span class="syntaxkeyword">,&nbsp;</span><span class="syntaxdefault">non&nbsp;inmorantur</span><span class="syntaxkeyword">.<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<</span><span class="syntaxdefault">br&nbsp;</span><span class="syntaxkeyword">/><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="syntaxdefault">Erat&nbsp;autem&nbsp;diritatis&nbsp;eius&nbsp;hoc&nbsp;quoque&nbsp;indicium&nbsp;nec&nbsp;obscurum&nbsp;nec&nbsp;latens</span><span class="syntaxkeyword">,&nbsp;</span><span class="syntaxdefault">quod&nbsp;ludicris&nbsp;cruentis&nbsp;delectabatur&nbsp;et&nbsp;in&nbsp;circo&nbsp;sex&nbsp;vel&nbsp;septem&nbsp;aliquotiens&nbsp;vetitis&nbsp;certaminibus&nbsp;pugilum&nbsp;vicissim&nbsp;se&nbsp;concidentium&nbsp;perfusorumque&nbsp;sanguine&nbsp;specie&nbsp;ut&nbsp;lucratus&nbsp;ingentia&nbsp;laetabatur</span><span class="syntaxkeyword">.<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<</span><span class="syntaxdefault">br&nbsp;</span><span class="syntaxkeyword">/><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="syntaxdefault">Quo&nbsp;cognito&nbsp;Constantius&nbsp;ultra&nbsp;mortalem&nbsp;modum&nbsp;exarsit&nbsp;ac&nbsp;nequo&nbsp;casu&nbsp;idem&nbsp;Gallus&nbsp;de&nbsp;futuris&nbsp;incertus&nbsp;agitare&nbsp;quaedam&nbsp;conducentia&nbsp;saluti&nbsp;suae&nbsp;per&nbsp;itinera&nbsp;conaretur</span><span class="syntaxkeyword">,&nbsp;</span><span class="syntaxdefault">remoti&nbsp;sunt&nbsp;omnes&nbsp;de&nbsp;industria&nbsp;milites&nbsp;agentes&nbsp;in&nbsp;civitatibus&nbsp;perviis</span><span class="syntaxkeyword">.</</span><span class="syntaxdefault">p</span><span class="syntaxkeyword">><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<</span><span class="syntaxdefault">a&nbsp;</span><span class="syntaxkeyword">class=</span><span class="syntaxstring">'readmore'&nbsp;</span><span class="syntaxdefault">href</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'#'</span><span class="syntaxkeyword">></span><span class="syntaxdefault">Lire&nbsp;la&nbsp;suite</span><span class="syntaxkeyword">...</</span><span class="syntaxdefault">a</span><span class="syntaxkeyword">>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;</</span><span class="syntaxdefault">article</span><span class="syntaxkeyword">><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;<</span><span class="syntaxdefault">article&nbsp;</span><span class="syntaxkeyword">class=</span><span class="syntaxstring">'articlemore'</span><span class="syntaxkeyword">><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<</span><span class="syntaxdefault">h2</span><span class="syntaxkeyword">></span><span class="syntaxdefault">Article&nbsp;2</span><span class="syntaxkeyword"></</span><span class="syntaxdefault">h2</span><span class="syntaxkeyword">><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<</span><span class="syntaxdefault">p</span><span class="syntaxkeyword">></span><span class="syntaxdefault">Nec&nbsp;piget&nbsp;dicere&nbsp;avide&nbsp;magis&nbsp;hanc&nbsp;insulam&nbsp;populum&nbsp;Romanum&nbsp;invasisse&nbsp;quam&nbsp;iuste</span><span class="syntaxkeyword">.&nbsp;</span><span class="syntaxdefault">Ptolomaeo&nbsp;enim&nbsp;rege&nbsp;foederato&nbsp;nobis&nbsp;et&nbsp;socio&nbsp;ob&nbsp;aerarii&nbsp;nostri&nbsp;angustias&nbsp;iusso&nbsp;sine&nbsp;ulla&nbsp;culpa&nbsp;proscribi&nbsp;ideoque&nbsp;hausto&nbsp;veneno&nbsp;voluntaria&nbsp;morte&nbsp;deleto&nbsp;et&nbsp;tributaria&nbsp;facta&nbsp;est&nbsp;et&nbsp;velut&nbsp;hostiles&nbsp;eius&nbsp;exuviae&nbsp;classi&nbsp;inpositae&nbsp;in&nbsp;urbem&nbsp;advectae&nbsp;sunt&nbsp;per&nbsp;Catonem</span><span class="syntaxkeyword">,&nbsp;</span><span class="syntaxdefault">nunc&nbsp;repetetur&nbsp;ordo&nbsp;gestorum</span><span class="syntaxkeyword">.</</span><span class="syntaxdefault">p</span><span class="syntaxkeyword">><br /><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<</span><span class="syntaxdefault">p&nbsp;</span><span class="syntaxkeyword">class=</span><span class="syntaxstring">'textmore'</span><span class="syntaxkeyword">></span><span class="syntaxdefault">Saraceni&nbsp;tamen&nbsp;nec&nbsp;amici&nbsp;nobis&nbsp;umquam&nbsp;nec&nbsp;hostes&nbsp;optandi</span><span class="syntaxkeyword">,&nbsp;</span><span class="syntaxdefault">ultro&nbsp;citroque&nbsp;discursantes&nbsp;quicquid&nbsp;inveniri&nbsp;poterat&nbsp;momento&nbsp;temporis&nbsp;parvi&nbsp;vastabant&nbsp;milvorum&nbsp;rapacium&nbsp;similes</span><span class="syntaxkeyword">,&nbsp;</span><span class="syntaxdefault">qui&nbsp;si&nbsp;praedam&nbsp;dispexerint&nbsp;celsius</span><span class="syntaxkeyword">,&nbsp;</span><span class="syntaxdefault">volatu&nbsp;rapiunt&nbsp;celeri</span><span class="syntaxkeyword">,&nbsp;</span><span class="syntaxdefault">aut&nbsp;nisi&nbsp;impetraverint</span><span class="syntaxkeyword">,&nbsp;</span><span class="syntaxdefault">non&nbsp;inmorantur</span><span class="syntaxkeyword">.<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<</span><span class="syntaxdefault">br&nbsp;</span><span class="syntaxkeyword">/><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="syntaxdefault">Erat&nbsp;autem&nbsp;diritatis&nbsp;eius&nbsp;hoc&nbsp;quoque&nbsp;indicium&nbsp;nec&nbsp;obscurum&nbsp;nec&nbsp;latens</span><span class="syntaxkeyword">,&nbsp;</span><span class="syntaxdefault">quod&nbsp;ludicris&nbsp;cruentis&nbsp;delectabatur&nbsp;et&nbsp;in&nbsp;circo&nbsp;sex&nbsp;vel&nbsp;septem&nbsp;aliquotiens&nbsp;vetitis&nbsp;certaminibus&nbsp;pugilum&nbsp;vicissim&nbsp;se&nbsp;concidentium&nbsp;perfusorumque&nbsp;sanguine&nbsp;specie&nbsp;ut&nbsp;lucratus&nbsp;ingentia&nbsp;laetabatur</span><span class="syntaxkeyword">.<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<</span><span class="syntaxdefault">br&nbsp;</span><span class="syntaxkeyword">/><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="syntaxdefault">Quo&nbsp;cognito&nbsp;Constantius&nbsp;ultra&nbsp;mortalem&nbsp;modum&nbsp;exarsit&nbsp;ac&nbsp;nequo&nbsp;casu&nbsp;idem&nbsp;Gallus&nbsp;de&nbsp;futuris&nbsp;incertus&nbsp;agitare&nbsp;quaedam&nbsp;conducentia&nbsp;saluti&nbsp;suae&nbsp;per&nbsp;itinera&nbsp;conaretur</span><span class="syntaxkeyword">,&nbsp;</span><span class="syntaxdefault">remoti&nbsp;sunt&nbsp;omnes&nbsp;de&nbsp;industria&nbsp;milites&nbsp;agentes&nbsp;in&nbsp;civitatibus&nbsp;perviis</span><span class="syntaxkeyword">.</</span><span class="syntaxdefault">p</span><span class="syntaxkeyword">><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<</span><span class="syntaxdefault">a&nbsp;</span><span class="syntaxkeyword">class=</span><span class="syntaxstring">'readmore'&nbsp;</span><span class="syntaxdefault">href</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'#'</span><span class="syntaxkeyword">></span><span class="syntaxdefault">Lire&nbsp;la&nbsp;suite</span><span class="syntaxkeyword">...</</span><span class="syntaxdefault">a</span><span class="syntaxkeyword">>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;</</span><span class="syntaxdefault">article</span><span class="syntaxkeyword">><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;<</span><span class="syntaxdefault">script&nbsp;type</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'text/javascript'&nbsp;</span><span class="syntaxdefault">src</span><span class="syntaxkeyword">=</span><span class="syntaxstring">'https://code.jquery.com/jquery-2.1.3.min.js'</span><span class="syntaxkeyword">></span><span class="syntaxdefault"></script><br /></span>&nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;type='text/javascript'><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;$(function()&nbsp;{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('.readmore').click(function(e){<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;e.preventDefault();<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).prev().slideToggle(function()&nbsp;{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(this).next('.readmore').text(function&nbsp;(index,&nbsp;text)&nbsp;{<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;return&nbsp;(text&nbsp;==&nbsp;'Lire&nbsp;la&nbsp;suite...'&nbsp;?&nbsp;'Retour'&nbsp;:&nbsp;'Lire&nbsp;la&nbsp;suite...');<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />&nbsp;&nbsp;&nbsp;&nbsp;});<br /><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;</script><br /><br /></body><br /></html><br /></span>

zeb · 15 Mars 2015

-https://code.jquery.com/jquery-2.1.3.min.js
:roll:

concombre · 15 Mars 2015

zeb a dit:
-https://code.jquery.com/jquery-2.1.3.min.js
:roll:

Et ?

zeb · 15 Mars 2015

ET tu charge une bibliothèque externe (voir même interne > moins pire) pour deux lignes de javascript élémentaires (d'ailleurs montrées dans le code exemple du sujet)...
> document.getElementById('hidden').style.display simple bascule booléenne à mettre en oeuvre.

Retranscrit en terme d'énergie dans beaucoup de cas tu sollicite une ligne électrique qui a des chances de franchir océans et montagnes aux prix d'une énergie énorme et coûteuse pour une méconnaissance des outils natifs et aucun effet cinématique remarquable.

Je pense que favoriser JQuery présent ou pas pour des effets mineurs n'est pas une bonne solution.

Clairement la page donnée en exemple est basique les effets du slide sont légers, peuvent se gérer en full CSS et Javascritp Natif il est préférable de ne pas ancrer la réponse dans la surenchère surtout qu'une fois le site up la phase d'optimisation va remettre en cause ce choix de JQuery pour des raisons de résolution DNS, de poids de page, de temps de chargement et rendu etc ...

Sincèrement, c'est pas tourné contre toi en particulier mais je pense qu'il faut recentrer un peu le débat sur le web car ça prend la tournure des système d'exploitation, plus ça va plus on écrit des cochoneries sans réfléchir et sans penser a la finalité.

Si tu regarde la page
* le header c'est une histoire de onmouseover qui change un backgroud
* les slides (haut bas) c'est la même chose avec un onclick et une classe qui change
* le "voir plus" c'est deux lignes de javascript (image, il y en a peut être 4)

Si tu ajoute que le contenu masqué des slides ne sera pas pris en compte dans les recherches tu peux même te poser des questions sur la pertinence de la présentation d'un point de vu SEO donc de la légitimité de masquer le contenu. :wink:

Bref pour conclure est ce la bonne réponse ce code JQuery ? (c'est un débat j'en conviens ...)

garancetosello · 15 Mars 2015

Merci pour vos réponses
Zeb j'ai rien capté.
En gros tu me dis que j'utilise trop de codes et que ca pourrait être plus simple ?
Le truc c'est que je ne sais pas faire grand chose !

Concombre, j'essaye ce que tu m'as dit ce soir (merci)

zeb · 15 Mars 2015

garancetosello a dit:
En gros tu me dis que j'utilise trop de codes et que ca pourrait être plus simple ?

Oui et que quand tu lancera ton site et qu'il faudra optimiser (la conception n'est qu'un moment), tu va pleurer pour tout recommencer ...

garancetosello · 15 Mars 2015

Zeb,
Tu veux dire quoi par "optimiser" ? Tu veux dire référencer ?

zeb · 16 Mars 2015

oui 98% des sites ne donnent pas le résultat escompté, bref on viens ici et on pose la question "pourquoi" et la réponse est :
1/ optimiser le site (on-site)
2/ mettre en place une stratégie externe (off-site)

il va de soi que 2/ ne compense pas 1/

Le 1/ étant le plus important au départ. Là tu te posera la question de comment améliorer mes pages et là tu te rendra compte qu'avoir un code léger est plus important donc tu va recommencer ton travail.

Ta page actuellement pose deux soucis majeurs du SEO :
1/ elle charge des bibliothèques externes ou internes lourdes et multiples ce qui altère la vitesse de rendu et de traitement ce qui est un point très négatif (la rapidité et la nervosité d'un site est un critère très important)
2/ elle masque son contenu par des effets cinématiques, contenu qui ne sera donc pas pris en compte par les moteurs.

question : est il bon de te laisser continuer dans cette voie ?

zeb · 16 Mars 2015

J'ajoute que tu devrais passer par la case comprendre ce que tu fais. Regarde ton code dans une navigateur (Ctrl + U > firefox), c'est truffé de lignes en rouge (erreurs). Il y a des problèmes d'encodage aussi (caractères iso dans de l'utf ou l'inverse).
A te suivre depuis un moment il semble que tu ne te concentre que sur le visuel.