Expander JQuery (con imagen)

El plugin expander de JQuery nos ayuda  a que si tenemos un fragmento muy largo de texto pero poco espacio podamos mostrar solo un indicio de este texto en nuestra web y quien este interesado en leer más lo despliegue y lo pueda volver a reducir, es de mucha ayuda ya que en ocasiones a los visitantes de nuestra página web solo les interesa algún texto en específico y saturarlos con mucho texto puede evitar que regresen a visitarnos.

Recordar que antes de empezar con el plugin es necesario tener ya descargada el jQuery o tener el link hacia la web ya que sin JQuery pues el plugin no funcionaria.
yo utilizo el siguiente link

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Usarlo es muy sencillo y es gratuito.
Lo primero que tenemos que hacer es descargar el plugin desde la página del autor que es
http://plugins.learningjquery.com/expander/, aquí también obviamente  puedes encontrar la guía para poder implementarlo.

Bueno una vez descargado el zip se descomprime y podemos ver que en la carpeta vienen varios archivos pero el que nos interesa a nosotros es jquery.expander.js , copiamos ese archivo y lo pegamos en la carpeta de nuestro proyecto.

Consejo: Es mejor crear una carpeta que se llame js o scripts o query algo que te indique que dentro se van a encontrar esta clase de archivos, esto es para facilitar la búsqueda de archivos ya que cuando haces un proyecto este generalmente va creciendo y después quedan todos desorganizados los archivos, es una forma de mantener organizado nuestro proyecto.  Ahora si estas trabajando con algún framework yo uso Zend estos archivos se ponen en la carpeta public al igual que las imágenes o los archivos css.

Ahora en nuestro archivo html donde estamos poniendo el texto vamos a crear un div al que le vamos a poner texto creamos una etiqueta <p> que va indicar que es un párrafo, y dentro de la etiquetas <p> ponemos el texto. Al div le vamos a poner la class= "expandable" con el que lo vamos a identificar desde el archivo js.

quedaria algo así

<div class="expandable"><p>Nuestros conmutadores son equipos pensados para Pequeñas y Medianas Empresas  que buscan de un equipo eficiente y robusto, pero sin descuidar su presupuesto. Estos equipos son la mejor opción.<br/>
<b>*</>Elimina la complejidad en las comunicaciones.<br/>
<b>*</b>Aumenta la productividad individual.<br/>
<b>*</b>Hace la comunicaciones más efectivas.</p></div>

Ahora vamos a crear nuestro propio archivo .js para indicarle que queremos que el div sea expansible.
mi archivo se va a llamar expander.js y va a tener lo siguiente.

$(document).ready(function() {
  $('div.expandable p').expander({
    slicePoint:  80,  // default is 100
    expandPrefix:'... ', // default is '... '
    expandText:  '[leer más]',// default is 'read more'
    expandEffect:'show',
    expandSpeed: 0,
    collapseTimer:6000, //re-collapses after 6 seconds; default is 0, so no re-collapsing

    collapseEffect: 'hide',
    collapseSpeed:0,
    userCollapseText: '[leer menos]',  // default is 'read less'
   
  });

});

Expliquemos un poquito el código.
Estamos indicando que nuestro elemento  <p> que se encuentra dentro del div con clase expansible
es el que va a realizar la función de expander (plugin) y le vamos a pasar como parámetros las siguientes variables:
slicePoint: el número de caracteres  hasta donde va a mostrar por default muestra los primeros 100 caracteres pero se puede personalizar, en este ejemplo yo le indique que 80 caracteres.
expandPrefix: esta variable también es opcional el prefijo es lo que quieres mostrar antes de la leyenda red more por default maneja los puntos suspensivo (... ) pero se puede poner guión bajo, guión medio, etc, depende de ti.
expandText: Es lo que quieres que muestre en link  que se presiona para que se expanda por default maneja read more, pero si manejas una página en español lo mejor es que lo traduzcas y le pongas la leyenda "leer más" ó "más información" los corchetes [ ] no son necesarios.
expandEffect: No es necesario agregarlo por default se pone pero si lo agregas  forzosamente se tiene que poner show o slidedown.
collapseTimer: Es el tiempo en el que se esconderá el texto si no se presiona el link para esconder, yo le puse 6000 que serian 6 segundos si pones 0 no se esconderá.
collapseEffect: Es basicamente lo mismo que expandEffect, no es necesario ponerlo pero si lo pones tendrían que indicar el efecto "hice" o slideUp.
userCollapseText: El texto que queremos que muestre como link para cerrar el texto o esconder el texto.


Ahora lo que tenemos que hacer en nuestro archivo html es poner integrar los dos archivos el plugin y nuestra función de java script, para que todo funcione.
<script src="ruta_del_archivo/js/jquery.expander.js"></script>
<script src="ruta_del_archivo/js/expander.js"></script>

Lo corremos y listo nos mostrará el texto reducido con el link que dice [leer mas]. Al presionarlo nos mostrará el texto completo y el link con la leyenda [leer menos].

Puedes ir agregando elementos al archivo java script que creaste  se indica la etiqueta por ejemplo una lista sería  el tipo de elemento (ul), un punto y el nombre de la clase con el que lo vamos a relacionar (list1), un punto y la función expander con sus respectivos parámetros.

$('ul.list1').expander({


    slicePoint: 0,  // default es 100
    expandPrefix: '... ', // default es '... '
    expandText:   '',// default es 'read more'
    expandEffect: 'show',
    expandSpeed: 0,
    collapseTimer:6000, // contrae después de 6 segundos; default es 0, así  que no se contrae
    collapseEffect: 'hide',
    collapseSpeed:0,
    userCollapseText:'',  // default es 'read less'
  });

Ahora  es muy feo que si tenemos una web muy dinámica o con mucho diseño tenga que poner estos link con tan poca presencia para contraer y mostrar texto, claro el link se puede modificar un poquito gracias al css pero también estaría padre que se pudieran poner imágenes.
Después de estar buscando y buscando y no encontrar nada decidí meterme directamente al código del plugin y ponersela a la mala, resulto no ser para nada complicado.
Lo que vamos a hacer es abrir el archivo del plugin que descargamos  jquery.expander.js y vamos a crear dos variables nuevas. vamos a buscar la parte que dice defaults {}  dentro de esta sección podemos reconocer algunas de las variables que explique anteriormente  buscamos la variable userCollapsePrefix: ' ', y debajo de ella ponemos las dos nuevas, en mi caso les puse el nombre userCollapseImageUp y userCollapseImageDown (pero tu le puedes poner el nombre que quieras),
por default les pones (: '  ';) o sea nada, ya que el nombre y ruta de la imagen se la vamos a pasar por medio de nuestro archivo js. quedaría algo así:

(function($) {

  $.expander = {
    version: '1.4.2',
    defaults: {

      //the number of characters at which the contents will be sliced into two parts.

      slicePoint: 100,

      // whether to keep the last word of the summary whole (true) or let it slice in the middle of a word (false)

      preserveWords: true,

      // a threshold of sorts for whether to initially hide/collapse part of the element's contents.

      // If after slicing the contents in two there are fewer words in the second part than

      // the value set by widow, we won't bother hiding/collapsing anything.

      widow: 4,

      // text displayed in a link instead of the hidden part of the element.

      // clicking this will expand/show the hidden/collapsed text

      expandText: 'read more',

      expandPrefix: '… ',

      expandAfterSummary: false,

      // class names for summary element and detail element

      summaryClass: 'summary',

      detailClass: 'details',

      // class names for <span> around "read-more" link and "read-less" link

      moreClass: 'read-more',

      lessClass: 'read-less',

      // number of milliseconds after text has been expanded at which to collapse the text again.

      // when 0, no auto-collapsing

      collapseTimer: 0,


      // effects for expanding and collapsing

      expandEffect: 'slideDown',

      expandSpeed: 250,

      collapseEffect: 'slideUp',

      collapseSpeed: 200,

      // allow the user to re-collapse the expanded text.

      userCollapse: true,


      // text to use for the link to re-collapse the text

      userCollapseText: 'read less',

      userCollapsePrefix: ' ',

     

      //variables agregadas para mostrar imagen.

      userCollapseImageUp: ' ',

      userCollapseImageDown: ' ',


      // all callback functions have the this keyword mapped to the element in the jQuery set when .expander() is called


      onSlice: null, // function() {}

      beforeExpand: null, // function() {},

      afterExpand: null, // function() {},

      onCollapse: null // function(byUser) {}

    }

  };

Muy bien ahora buscamos la parte del código donde genera la etiqueta <a></a> esto es dentro de la función $.fn.expander = function(options) { } , busquemos la parte que dice
  // set up details and summary for expanding/collapsing
normalmente este trozo de código es igual a este:

$thisDetails = $this.find(detailSelector);
$readMore = $this.find(moreSelector);
$thisDetails.hide();
$readMore.find('a').unbind('click.expander').bind('click.expander', expand);

$summEl = $this.find('div.' + o.summaryClass);

   if ( o.userCollapse && !$this.find('span.' + o.lessClass).length ) {
       $this
       .find(detailSelector)
       .append('<span class="' + o.lessClass + '">' + o.userCollapsePrefix + '<a href="#">' + o.userCollapseText + '</a></span>');
          }

Ahora lo que vamos a modificar  es en el trozo de la comparación (if) podemos ver que después de abrir la etiqueta <a href=#> se concatena a la variable que contiene el texto que definimos anteriormente (userCollapseText=[leer más]),  entonces lo que vamos a hacer es agregar la variable de la imagen antes de la del texto.  así que quedaría de la siguiente manera

// set up details and summary for expanding/collapsing

   $thisDetails = $this.find(detailSelector);
   $readMore = $this.find(moreSelector);
   $thisDetails.hide();
   $readMore.find('a').unbind('click.expander').bind('click.expander', expand);

   $summEl = $this.find('div.' + o.summaryClass);
      if ( o.userCollapse && !$this.find('span.' + o.lessClass).length ) {
        $this
        .find(detailSelector)
        .append('<span class="' + o.lessClass + '">' + o.userCollapsePrefix + '<a href="#">' + o.userCollapseImageUp + o.userCollapseText + '</a></span>');
      }

Ahora aquí podemos ver  que ya aparece nuestra variable (userCollapseImageUp). Lo mismo vamos a hacer en la sección donde definimos la etiqueta <a> para mostrar el texto.  Vamos a buscar la sección de código  donde se encuentra la función function buildMoreLabel(o) {
y de la misma manera le vamos a agregar la variable pero en este caso sería nuestra variable userCollapseImageDown.
quedaría de la siguiente manera.

 function buildMoreLabel(o) {
   var ret = '<span class="' + o.moreClass + '">' + o.expandPrefix;
   ret +='<a href="#">' + o.userCollapseImageDown + o.expandText + '</a></span>';

   return ret;
 }

Esto sería todo lo que vamos a modificar en este archivo. Ahora en nuestro archivo  expander.js vamos a agregar las variables de las imágenes.

$(document).ready(function() {

  // simple example, using all default options unless overridden globally
  // $('div.expandable p').expander();
  // *** OR ***
  // override default options (also overrides global overrides)

  $('div.expandable p').expander({

    slicePoint:      80,  // default is 100
    expandPrefix:     '... ', // default is '... '
    expandText:       '',// default is 'read more'
    expandEffect: 'show',
    expandSpeed: 0,

    collapseTimer:    6000, // re-collapses after 6 seconds; default is 0, so no re-collapsing

    collapseEffect: 'hide',
    collapseSpeed:0,
    userCollapseText: '',  // default is 'read less'
    userCollapseImageUp:'<img src="/ruta_de la_imagen/images/orange_arrow_up.png" />',
    userCollapseImageDown: '<img src="/ruta_de_la_imagen/images/orange_arrow_down.png" />'
  });

});

Ok a las variables le agregamos la etiqueta imagen con la ruta donde se encuntra la imagen que quieres mostrar.

El resultado.

Bueno eso sería todo espero que les haya servido. No olviden poner sus comentarios.

"Programar no tiene que ser tan difícil como parece...."