11496 sujets

JavaScript, DOM et API Web HTML5

Impossible de réafficher "lire la suite"

Bonjour

Je veux faire des articles avec des "lire la suite" qui s'affichent en dessous, dans la même page. L'événement "toggle" qui a disparu depuis le 1.9 était bien pratique Smiley cligne

J'arrive à afficher et masquer comme je veux, sauf la dernière étape, le "lire la suite" ne se ré affiche pas, et je ne comprends pas pourquoi.
Si quelqu'un a une piste ... ce serait gentil

Voici mon code, (pour la démo, tout est dans la page) et n’importe quel contenu...

<style>
.lasuite, .masquer {
	display: none;
}
.bg {
	background: red;
}
</style>
</head>

<body>
<article class="lire">
  <p>En se réveillant un matin après des rêves agités, Gregor Samsa se retrouva, dans son lit, métamorphosé en un monstrueux insecte</p>
  <p class="suite"><a href="#">Lire la suite</a></p>
  <div class="lasuite">Il était sur le dos, un dos aussi dur qu'une carapace, et, en relevant un peu la tête, il vit, bombé, brun, cloisonné par des arceaux plus rigides, son abdomen sur le haut duquel la couverture, prête à glisser tout à fait, ne tenait plus qu'à peine. <br>
    Il était sur le dos, un dos aussi dur qu'une carapace, et, en relevant un peu la tête, il vit, bombé, brun, cloisonné par des arceaux plus rigides, son abdomen sur le haut duquel la couverture, prête à glisser tout à fait, ne tenait plus qu'à peine.<br>
    sur le dos, un dos aussi dur qu'une carapace, et, en relevant un peu la tête, il vit, bombé, brun, cloisonné par des arceaux plus rigides, son abdomen sur le haut duquel la couverture, prête à glisser tout à fait, ne tenait plus qu'à peine. Il était sur le dos, un dos aussi dur qu'une carapace, et, en relevant un peu la tête, il vit, bombé, brun, cloisonné par des arceaux plus rigides, son abdomen sur le haut duquel la couverture, prête à glisser tout à fait, ne tenait plus qu'à peine.
    <p class="mask" ><a href="#">Masquer</a></p>
  </div>
</article>
<article class="lire">
  <p>En se réveillant un matin après des rêves agités, Gregor Samsa se retrouva, dans son lit, métamorphosé en un monstrueux insecte</p>
  <p class="suite"><a href="#">Lire la suite</a></p>
  <div class="lasuite">Il était sur le dos, un dos aussi dur qu'une carapace, et, en relevant un peu la tête, il vit, bombé, brun, cloisonné par des arceaux plus rigides, son abdomen sur le haut duquel la couverture, prête à glisser tout à fait, ne tenait plus qu'à peine. <br>
    Il était sur le dos, un dos aussi dur qu'une carapace, et, en relevant un peu la tête, il vit, bombé, brun, cloisonné par des arceaux plus rigides, son abdomen sur le haut duquel la couverture, prête à glisser tout à fait, ne tenait plus qu'à peine.<br>
    sur le dos, un dos aussi dur qu'une carapace, et, en relevant un peu la tête, il vit, bombé, brun, cloisonné par des arceaux plus rigides, son abdomen sur le haut duquel la couverture, prête à glisser tout à fait, ne tenait plus qu'à peine. Il était sur le dos, un dos aussi dur qu'une carapace, et, en relevant un peu la tête, il vit, bombé, brun, cloisonné par des arceaux plus rigides, son abdomen sur le haut duquel la couverture, prête à glisser tout à fait, ne tenait plus qu'à peine.
    <p class="mask" ><a href="#">Masquer</a></p>
  </div>
</article>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script>
	
$(document).ready(function() {

  $(".lire").click(function() {
	   $(".lasuite").hide();
	   $(".lasuite", this).show();
	  $(".suite", this).hide();
    });
		
	
	 $(".mask").click(function() {
		  $(this).hide();
		$(this).parent(".lasuite").fadeOut(10);
		 	  $(".lasuite").show();

		
	});
});//fin ready function
	</script>


C'est 
$(".lasuite").show();
qui ne fonctionne pas !

Bonne journée bien chaude à tous Smiley merci
le toggle n'a pas vraiment disparue, il a juste changé.

$('#hideshow').click(function () {
    $('#message').toggle();
    if($('#message').is(':visible')) {
        $('#hideshow').text('Hide');        
    } else {
        $('#hideshow').text('Show');   
    }
});

Modifié par JENCAL (21 Jun 2017 - 16:59)
Bonjour,

Sinon, tu te fais ton propre toggle :
$('.toggle a').click(function(){
  var $el = $(this),
      $msg = $el.parent().prev('.lasuite'),
      txt = $el.text();
  
  if ( $msg.is(':visible') ) $msg.slideUp(100)
  else                       $msg.slideDown(500)
  $el.text( $el.data('toggle') ).data('toggle', txt)
})


Exemple : https://codepen.io/anon/pen/pwwdKq
Sujet clos
Aller à