Crear un link "mostrar menos" para ocultar texto

[skat]

Hola a tod@s

Estoy utilizando Prestashop, y dentro de la página de "fabricante" tengo la opción de añadir una descripción. Estas descripciones que añado a veces son bastante largas y el tema muestra un link con la palabra "mas" y al clickar sobre ella te muestra todo el texto.

Pues bien, ahora lo que quiero es cuando está totalmente desplegado el texto, muestra un link con la palabra "Menos" para que este pueda volver a su posición resumida inicial.

Entiendo que esto lo tengo que hacer en manufacture.tpl y utilizando Javascipt pero honestamente no tengo ni idea como.

Alguien podría echarme un mano??

Muchas gracias!!

El código de ese archivo es

Código:

{include file="$tpl_dir./errors.tpl"}

{if !isset($errors) OR !sizeof($errors)}
	<h1 class="page-heading product-listing">
		{l s='List of products by manufacturer'}&nbsp;{$manufacturer->name|escape:'html':'UTF-8'}
	</h1>
	{if !empty($manufacturer->description) || !empty($manufacturer->short_description)}
		<div class="description_box rte">
			{if !empty($manufacturer->short_description)}
				<div class="short_desc">
					{$manufacturer->short_description}
				</div>
				<div class="hide_desc">
					{$manufacturer->description}
				</div>
				<a href="#" class="lnk_more" onclick="$(this).prev().slideDown('slow'); $(this).hide();$(this).prev().prev().hide(); return false;" title="{l s='More'}">
					{l s='More'}
				</a>
			{else}
				<div>
					{$manufacturer->description}
				</div>
			{/if}
		</div>
	{/if}

	{if $products}
		<div class="content_sortPagiBar">
	    	<div class="sortPagiBar clearfix">
				{include file="./product-sort.tpl"}
				{include file="./nbr-product-page.tpl"}
			</div>
	    	<div class="top-pagination-content clearfix">
	        	{include file="./product-compare.tpl"}
	            {include file="$tpl_dir./pagination.tpl" no_follow=1}
	        </div>
		</div>

		{include file="./product-list.tpl" products=$products}

		<div class="content_sortPagiBar">
	        <div class="bottom-pagination-content clearfix">
	        	{include file="./product-compare.tpl"}
				{include file="./pagination.tpl" no_follow=1 paginationId='bottom'}
	        </div>
		</div>
	{else}
		<p class="alert alert-warning">{l s='No products for this manufacturer.'}</p>
	{/if} 
{/if}

[AngelKrak]

Aqui habia hecho una demo, fijate si es lo que quieres ;)

https://codepen.io/AngelKrak/pen/yJkZvX

[marlanga]

Cambia esto

Código HTML:

<div class="short_desc">
                    {$manufacturer->short_description}
                </div>
                <div class="hide_desc">
                    {$manufacturer->description}
                </div>
                <a href="#" class="lnk_more" onclick="$(this).prev().slideDown('slow'); $(this).hide();$(this).prev().prev().hide(); return false;" title="{l s='More'}">
                    {l s='More'}
                </a>
 

Por

Código HTML:

<div id="div_short_desc" class="short_desc">
                    {$manufacturer->short_description}
                </div>
                <div id="div_desc" class="hide_desc">
                    {$manufacturer->description}
                </div>
<a id="link_desc" href="#" class="lnk_more" title="{l s='More'}" data-title="{l s='Less'}">{l s='More'}</a>
<script>
$('#link_desc').on('click', function(){
    $('#div_short_desc').toggleClass('hide_desc');
    $('#div_desc').toggleClass('hide_desc');
    var title= $(this).attr('title');
    var data = $(this).attr('data-title');
    $(this).attr('title', data ).text(data).attr('data-title', title);
    return false;
});
</script>
 

Y traduce ese 'Less' en el fichero de traducciones.