Using XSLT create href to id based to attribute - xslt

Question

I want to create a bootstrap accordion menu using xslt and read data from xml file. I have this xslt
<xsl:template match="/Settings">
<xsl:for-each select="Area">
<div class="panel-group configuration-menu-style" id="Menu">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#Menu" href="#{#Caption}">
<xsl:value-of select="#Caption"/>
</a>
</h4>
</div>
<div id="{#Caption}" class="panel-collapse collapse in">
<div class="panel-body custom-padding">
<table class="table">
<xsl:for-each select="Category">
<tr>
<td class="configuration-submenu-style">
<xsl:value-of select="#Caption"/>
</td>
</tr>
</xsl:for-each>
</table>
</div>
</div>
</div>
</div>
</xsl:for-each>
In this line
<div id="{#Caption}" class="panel-collapse collapse in">
i give id based to attribute and works. Using developer tools in browser i can see that has id="MENU OPTION2" The problem is in this line
<a data-toggle="collapse" data-parent="#Menu" href="#{#Caption}">
<xsl:value-of select="#Caption"/>
</a>
Using developer tools in browser i can see that this element has href="#MENU%20OPTION2
So... how can remove %20 from href?
SOLUTION
<a data-toggle="collapse" data-parent="#Menu" href="#{position()}">
<div id="{position()}" class="panel-collapse collapse in">
BECAUSE 'id="MENU OPTION2" is not valid as id should not contain space'

Answer 1

id="MENU OPTION2" is not valid as id should not contain spaces
Just have a look at this:
What are valid values for the id attribute in HTML?
So I suggest you use "MENU_OPTION2" or "MENU-OPTION2" as there would be no difference when urlencoding those strings.
-- EDIT --
By the way, I just remembered that I already worked on this kind of subject long time ago... http://xul.ccoste.fr/
And if you have a look as my XSLT file http://xul.ccoste.fr/xul-bootstrap.xsl, I used generate-id() to be sure that there would never be any conflict between IDs.
<xsl:template match="tabs">
<ul class="nav nav-tabs">
<xsl:for-each select="tab">
<li>
<xsl:if test="position() = 1">
<xsl:attribute name="class"><xsl:text>active</xsl:text></xsl:attribute>
</xsl:if>
<a data-toggle="tab" href="#{generate-id(../..)}-{position()}">
<xsl:value-of select="#label" />
</a>
</li>
</xsl:for-each>
</ul>