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" /> 
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" /> 
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:

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

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:
Cliquez pour agrandir...

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 ?
Cliquez pour agrandir...

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.

Similar Threads - Bouton caché	Forum	Date
WordPress Bouton "Lire la suite" et texte caché	Débuter en référencement	3 Novembre 2019
Texte caché, visible via un bouton javascript = danger ?	Référencement Google	2 Juillet 2004
Ancre de lien ou bouton	Débuter en référencement	7 Janvier 2022
Ajout bouton recherche Google sur mon site : Impact SEO	Demandes d'avis et de conseils sur vos sites	22 Décembre 2021
Google "clique-t-il" sur les boutons ?	Rédaction web et référencement	21 Juillet 2019
Grossir le champs et bouton pour la recherche personnalisée Google (adsense)	AdSense	15 Mars 2018
Bouton Facebook j'aime en footer	Débuter en référencement	25 Janvier 2018
Exécution requête sur bouton sur une ligne tableau	Administration d'un site Web	5 Juillet 2017
Re-bilan bouton +1, plusone et conserver le compteur.	Google+	30 Mars 2017
Tracabilité sur un bouton ?	Débuter en référencement	23 Février 2017
Bouton "Mettre ce site en page d'accueil"	Développement d'un site Web ou d'une appli mobile	16 Juillet 2016
Script bouton google plus et W3c	Débuter en référencement	2 Juillet 2016
Background d'une cellule ou d'une div selon l'état d'un bouton radio	Développement d'un site Web ou d'une appli mobile	30 Mai 2016
[résolu] Hauteur de div selon état d'un bouton radio	Développement d'un site Web ou d'une appli mobile	23 Mai 2016
changer style d'un label quand bouton radio checked	Développement d'un site Web ou d'une appli mobile	25 Février 2016
boutons sociaux	Développement d'un site Web ou d'une appli mobile	1 Mai 2015
Traffic étrange en provenance de "boutons sociaux"	Autres réseaux sociaux	19 Mars 2015
Bouton tracking	Google Analytics	4 Mars 2015
Placer un bouton de tracking	Netlinking, backlinks, liens et redirections	4 Mars 2015
Bouton Partager Facebook personnalisé	Facebook	20 Février 2015