Come posso risolvere il problema dello spazio orizzontale dei breadcrumbs con jQuery?

Per loro natura i breadcrumbs tendono ad espandersi fino a sistemarsi su una nuova riga. Possiamo ovviare a questo problema rendendo i breadcrumbs espandibili con jQuery.

Nasconderemo tutti i link, la voce finale ed i separatori ad eccezione del primo link e del primo separatore. Quindi cliccando su ciascun separatore verranno mostrare le voci che lo seguono:

$(function() {

	$( "#breadcrumbs" ).children().
	not( "a:first, span.sep:first" ).
	hide();
	
	$( "span.sep", "#breadcrumbs" ).click(function() {
	
		var $span = $( this );
		
		var $sibling = ( $span.next().is( "a" ) ) ? $span.next().add( $span.next().next() )  : $span.next( "strong" );
		
		
		$sibling.show( 500 );
	
	
	});

});

Potete osservare il demo di seguito.

See the Pen jQuery: expandable breadcrumbs by Gabriele Romanato (@gabrieleromanato) on CodePen.