Jump to content

[Résolu] Fermer/ouvrir description de catégorie avec bouton plus et moins


Recommended Posts

Bonjour à tous,

J'utilise prestashop 1.5.6 et j'utilise très souvent les descriptions de catégories et le fameux bouton "plus" qui permet d'afficher la suite du contenu.

 

Cet ajout est super utile mais il y a un petit truc qui me gêne quand même... Le fait de ne pas pouvoir refermer l'espace d'affichage avec un bouton "Moins".

 

Je suppose qu'il faut créer un bouton javascript qui ferrais l'inverse du bouton "plus" mais je ne suis pas très doué en javascript...

 

Est-ce que quelqu'un aurait une idée de comment procéder pour apporter cette amélioration ?

 

Merci d'avance pour votre aide !

 

 

Edited by MrC8 (see edit history)
Link to comment
Share on other sites

Bonjour,

 

Voilà un peu d'aide via JQUERY assez simple à mettre en place !!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ma page JQUERY</title>
 <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
<style type="text/css">
.show_hide {
    display:none;
}
</style>
<script type="text/javascript">
$(document).ready(function(){

   $(".slidingDiv").hide();
   $(".show_hide").show();

   $('.show_hide').toggle(function(){
       $(".slidingDiv").slideDown(
         function(){
           $("#plus").text("[-]")
         }
       );
   },function(){
       $(".slidingDiv").slideUp(
       function(){
           $("#plus").text("[+]")
       }
       );
   });
});

</script></head>

<body>

<a href="#" class="show_hide" id="plus">[+]</a>
<div class="slidingDiv" style="display: block;">
Texte en afficher/cacher !!
</div>


</body>
</html>

Ckarone

Edited by ckarone (see edit history)
Link to comment
Share on other sites

Youhou ! Malgré mes faibles connaissances en jquery j'ai réussi à faire ce que je voulais !

Encore merci de ton aide Ckarone !

 

Voilà le code pour ceux que ça intéresse.

 

Dans category.tpl, remplacer :

{if $category->description}
	<div class="cat_desc">
		{if strlen($category->description) > 120}
			<div id="category_description_short">{$category->description|truncate:150}</div>
			<div id="category_description_full" style="display:none">{$category->description}</div>
			<a href="#" onclick="$('#category_description_short').hide(); $('#category_description_full').show(); $(this).hide(); return false;" class="lnk_more">{l s='More'}</a>
		{else}
            <div>{$category->description}</div>
		{/if}
	</div>
{/if}

Par :

{if $category->description}
	<div class="cat_desc">
		{if strlen($category->description) > 120}
		<div id="category_description_short">{$category->description|truncate:150}</div>
		<div id="category_description_full" style="display:none">{$category->description}</div>
		<p><a href="#" class="lnk_more" id="plus">{l s='More'}</a></p>
		{else}
			<div>{$category->description}</div>
		{/if}
	</div>
<script type="text/javascript">
	$(document).ready(function(){
		$("#category_description_full").hide();
		$(".lnk_more").show();                
			$('.lnk_more').toggle(function(){
				$("#category_description_full").slideDown(
				function(){
					$("#plus").text("Moins").addClass("less")
                		} 
                	);
                	$("#category_description_short").hide();
                },function(){
                	$("#category_description_full").slideUp(
                function(){
                	$("#plus").text("Plus").removeClass("less")
                		}
                	);	
                    $("#category_description_short").show();
           });
    });
</script>
{/if}

J'en ai profité pour ajouter la class less au bouton pour pouvoir avoir un affichage différent lorsque la description de la catégorie est ouverte.

 

Et voilà :)

  • Like 1
Link to comment
Share on other sites

  • 6 years later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...