Accueil » Hacks » Réduire la description complète plus/moins


Le script réduit le contenu d'un article complet et le révèle lorsque vous cliquez sur le lien > Plus. Et vice versa, lorsque vous cliquez sur > moins, cela masque une partie du contenu.

Installation :
1. Ajoutez des styles au fichier modèle CSS :
.full-desc{overflow:hidden;position:relative;transition:height .2s}
.text-less{margin-bottom:0!important}
.text-less:before{content:'';position:absolute;z-index:1;bottom:0;left:0;right:0;height:120px;pointer-events:none;background:-webkit-linear-gradient(top,rgba(255,255,255,0) 0%,#fff 100%);background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,#fff 100%)}
.show-more{margin:0 0 20px;font-size:12px;font-weight:700}
.show-more span{display:inline-block;cursor:pointer;text-decoration:underline;color:#f0542e}


2. Insérez le code JS dans main.tpl au dessous de [/b] :
<script>
$(document).ready(function() {
$('.full-desc').ShortText({
  height: '200',
  text: 'Больше'
});
});

jQuery.fn.ShortText = function(e) {
var e = jQuery.extend({
  height: "200",
  text: "Plus"
}, e);
return this.each(function() {
  var i = $(this),
  t = i.height();
  t > e.height && i.addClass("full-desc text-less").height(e.height).after('<div class="show-more"><span>' + e.text + "</span></div>"), $(".show-more span").click(function() {
  var i = $(this),
  s = $(this).parent().prev(".full-desc");
  ah = parseInt(s.css("height"), 10), ah == t ? s.css({
  height: e.height
  }) : s.css({
  height: t
  }), i.text(i.text() == e.text ? "Moins" : e.text), s.toggleClass("text-less")
  })
})
};
</script>


[b]3.
Au bon endroit fullstory.tpl ajoutez :
<div class="full-desc clearfix">{full-story}</div>


Version DLE : 13.x-14.x
Auteur : redissx
Soutenez le site
Tous les fonds collectés seront reversés afin de garder le site et de vous proposer toujuour autant de modules et templates
Merci d'avance!

Commentaires (0)

Aucun commentaire pour le moment. Vous pouvez être le premier!
Ajouter un commentaire
Information
Les utilisateurs du Invités ne sont pas autorisés à ajouter des commentaires à cette publication.