I've got a foreach loop, going through each section and only display them in divs with corresponding classes.

<xsl:for-each select="sections/section">
  <xsl:sort select="sc_index" />
  <h2>
    <xsl:value-of select='name' />
  </h2>
  <div class="rel10r3">
    <ul>
      <xsl:for-each select="instructions/instruction[releases//release='10r3']">
        <xsl:sort select="index" />
        <li>
          <xsl:value-of select="content" />
        </li>
      </xsl:for-each>
    </ul>
  </div>
  <div class="rel11r2" style="display:none">
    <ul>
      <xsl:for-each select="instructions/instruction[releases//release='11r2']">
        <xsl:sort select="index" />
        <li>
          <xsl:value-of select="content" />
        </li>
      </xsl:for-each>
    </ul>
  </div>
  <div class="rel12r1" style="display:none">
    <ul>
      <xsl:for-each select="instructions/instruction[releases//release='12r1']">
        <xsl:sort select="index" />
        <li>
          <xsl:value-of select="content" />
        </li>
      </xsl:for-each>
    </ul>
  </div>
  <div class="rel12r2" style="display:none">
    <ul>
      <xsl:for-each select="instructions/instruction[releases//release='12r2']">
        <xsl:sort select="index" />
        <li>
          <xsl:value-of select="content" />
        </li>
      </xsl:for-each>
    </ul>
  </div>
  <div class="rel13r1" style="display:none">
    <ul>
      <xsl:for-each select="instructions/instruction[releases//release='13r3']">
        <xsl:sort select="index" />
        <li>
          <xsl:value-of select="content" />
        </li>
      </xsl:for-each>
    </ul>
  </div>
</xsl:for-each>

What I do after that is using a drop-down menu, and with the help of javascript switch the style.display property of the divs accordingly.

Form:

<form>
  <select name="release" onchange="return showHide(this);">
     <option value="10r3" selected="selected">10r3</option>
     <option value="11r2">11r2</option>
     <option value="12r1">12r1</option>
     <option value="12r2">12r2</option>
     <option value="13r1">13r1</option>
   </select>
 </form>

Javascript:

function showHide(selection) {
    var f = selection.form;
    // Retrieve the value of the option selected.
    var opt = selection.options[selection.selectedIndex].value;
    /* Retrieve all the div elements of the document and then parse them to
     * see if they have a classname corresponding with the selected release.
     * If it is the case, remove all display style, otherwise set the
     * display style to none.
     */
    var divArray = document.getElementsByTagName("div");
    for(var i=0; i<divArray.length; i++){
        var relArray = ["10r3","11r2","12r1","12r2","13r1"];
        for(var j=0; j<relArray.length; j++){
            var relName = relArray[j];
            if(divArray[i].className == "rel"+relName){
                if(opt===relName){
                    divArray[i].style.display = "";
                }else{
                    divArray[i].style.display = "none";
                }
            }
        }
    }
    return false;
}

I've already refactored my javascript code, but there is still plenty of repetitive code out there, and it can only grow the more releases there will be.