mettre du texte séparé en 2 dans bloc texte avec lien lire plus

[prestaprojet]

Bonjour,

Je souhaite mettre du texte séparé en 2 dans bloc texte avec lien lire plus comme l'explique ce poste clôturé :

Quote

https://www.prestashop.com/forums/topic/1003241-resolu-mettre-du-texte-page-daccueil-avec-lien-lire-plus/
 

J'ai donc inséré ce code :

<div class="T1">
<p>Bla</p>
<button class="btn btn-default" onClick="$('#show_text').show();$(this).hide(); ">
  Lire la suite
</button>
</div>

<div class="T2">
<div id="show_text" style="display: none;">
<p>Bla bla bla</p>
</div>
</div>

mais j'obtiens l'erreur suivante cf en pj

Quelqu'un sait m'aider svp afin que ça fonctionne ?

Merci d'avance pour votre aide

:-)

 

[kerlin]

pourquoi y a-t-il des guillemets avant le premier <div ??

[prestaprojet]

Bonjour

Merci pour Cette réponse et orientation ; aucune idée.

Mais même sans ça ne fonctionne pas.

Merci d'avance pour votre aide

🙂

[kerlin]

essayez sans le code javascript du bouton pour voir

[prestaprojet]

Bonjour,

Vous l'ecrireriez de quelle manière ?

Merci d'avance pour votre aide

🙂

[kerlin]

c'est juste pour tester. Vous supprimez onclick="...."

[prestaprojet]

Bonjour,

Essaie réalisé

L'erreur disparaît mais les 2 parties de texte apparaissent et donc l'intérêt d'avoir le bouton pour découvrir la 2 iem partie de texte n'est plus.

Du coup je n'ai pas le résultat souhaité.

A votre écoute pour des orientations qui me permette de trouver la solution

Merci d'avance pour votre aide

:-)

[kerlin]

oui mais ça démontre que c'est bien le code javascript qui n'est pas accepté par Prestashop dans les pages. donc il faut procéder autrement. C'est possible de le faire en css. Sinon, il faut chercher sur le Net, en intervenant sur le fichier tpl il y a moyen de forcer la main à Prestashop

[prestaprojet]

Bonjour

Si c'est possible De le gérer en css ça peut être intéressant mais j'ai Rien trouvé dans mes recherches.

Si vous avez des orientations, je suis preneur.

 

Merci d'avance pour votre aide

🙂

[kerlin]

un petit effort ! 😉 tapez "css afficher bloc clic" et vous allez trouver des trucs

 

[prestaprojet]

Bonjour

Oui c'est Vrai Il y a beaucoup de chose mais rien trouvé Qui fonctionne encore Pour moi.

Merci d'avance pour votre aide

🙂

[prestaprojet]

Bonjour,

Du coup j'ai opté pour la solution suivante que je trouve fastidieuse mais qui a le mérite de fonctionner :

Pour exemple :

Dans mon fichier custom.css

Quote

/* *********   div *********** */
#afficher { /* si vous souhaiter ajouter des paramètres */
   }
#LIRESUITE {
   display:none;
   
}
#afficher:target #LIRESUITE {
   display:block;
}
.masquer {
   display:none;
}
#afficher:target .masquer {
   display:inline;
}
#afficher:target .afficher {
   display:none;
}

Puis dans mon bloc de texte :

 

Quote

/*LIRE SUITE*/
<div id="afficher">
<div id="masquer">
<div><p>TEXTE ... <a href="#afficher" class="afficher">Lire la suite </a></p></div>
<div><p id="LIRESUITE">...Suite Texte fin</p></div>
<p><a href="#masquer" class="masquer">Réduire</a></p>
</div>
</div>

L’inconvénient est de devoir le faire pour chaque div différente en prenant le soin de renommer les id.

Si il y a d'autres solutions je suis preneur pour de la légèreté.

Merci d'avance pour votre aide

:-)

[kerlin]

bonjour,

je ne comprends pas, pourquoi utiliser des id ? avec des class, les règles s'appliqueront sur toutes les div ayant la class "afficher" ou "masquer"

 

[prestaprojet]

Bonjour,

Oui surement mais cela ne donne pas le résultat souhaité.

Si sur une même page, il y  a plusieurs block div avec la requête lire suite et bien les autres block div vont s'ouvrir si on ne différencie pas les div ; c'est ce qui s'est produit comme résultat chez moi la raison pour laquelle j'ai utilisé des id pour différencier.

:-)

[kerlin]

vous n'avez pas donné le css que vous avez fait. Avec un :hover, pas besoin de créer des id différents. 

La preuve : https://codepen.io/sirius82/pen/VwWXxde