jQuery: manipolazione avanzata del DOM

jQuery ci permette di manipolare il DOM a nostro piacimento. In questo articolo vedremo come trasformare una struttura lineare in una struttura annidata creando al contempo un effetto di accordion su tale struttura. Vediamo insieme i dettagli dell'implementazione.

La nostra struttura di partenza è la seguente:

<h2>...</h2>
<p>...</p>
<h3>...</h3>
<p>....</p>
<h2>...</h2>
<p>...</p>
<h3>...</h3>
<p>....</p>

Vogliamo trasformarla nella seguente struttura:

<div class="sticky">

	<h2>...</h2>
	
	<div class="accordion">
	
	  <p>...</p>
	  
	  <h3>...</h3>
	  
	  <p>...</p>
	
	
	</div>

</div>

<h2>...</h2>
<p>...</p>
<h3>...</h3>
<p>...</p>

Per prima cosa usiamo in combinazione i metodi nextUntil() e wrapAll() per creare il contenitore più esterno:

var sticky = '<div class="sticky"></div>';
var accordion = '<div class="accordion"></div>';
  
$('h2:first', 'body').nextUntil('h2').andSelf().
  wrapAll(sticky);
  
$('h2', 'div.sticky').css('cursor', 'pointer');

Il metodo andSelf() ci permette di includere nella selezione anche il selettore oggetto della catena jQuery. A questo punto dobbiamo includere nel contenitore dell'accordion tutti gli elementi che vengono dopo la prima intestazione del nuovo elemento sticky:

$('h3, p', 'div.sticky').wrapAll(accordion);

A questo punto l'effetto di accordion si crea con facilità:

$('h2', 'div.sticky').click(function() {
  
    var $h2 = $(this);
    var next = $h2.next();
    
    if(next.is(':hidden')) {
    
      next.slideDown('slow');
    
    
    } else {
    
      next.slideUp('slow');
    
    
    }
  
  
});

Potete visionare l'esempio finale in questa pagina.