// IGNORE THIS ...

// JUST TO CREATE 1000 ELEMENTS ----------------

function rnd(min,max) {

  return Math.floor(Math.random()*(max-min+1)+min);

}

var sectionsHTML = "";

for(var i=1; i<1001; i++){

  /*jshint multistr: true */

  var bg = "hsl("+ rnd(0, 255) +", "+rnd(0, 100)+"%, "+rnd(40, 100)+"%)";

  sectionsHTML += "<div class='section' style='background:"+bg+"'>\n\

        <span class='trigger'>Button"+i+"</span>\n\

        <div class='content'>"+i+"Content</div>\n\

      </div>";

}

$("#fullpage").append( sectionsHTML );

// #JUST TO CREATE 1000 ELEMENTS ---------------

​

​

​

​

// Now...:

​

​

​

// Cache:

var $fullpage = $("#fullpage");

var $sections = $fullpage.find(".section");

var $content  = $sections.find(".content");

​

// Store (temporary):

// inside $visible we will store our visible el,

// so we don't need to run over all our elements

// and sniff for classes:

var $visible = null; 

​

// (no need to cache .trigger if only used here)

$sections.on("click", ".trigger", function(){

  // Remove from $visible (if not null):

  if($visible) $visible.removeClass("CSS3fadeIn"); 

  // Set a new visible element:

  $visible = $(this).next(".content");

  // Use that $visible one now:

  $visible.addClass("CSS3fadeIn"); // Add to next one

});

​

​