XSLT can't use xsl:attribute to set href attribute

Question

I'm having a strange problem and I am also only commencing to get my head around XSLT for a project. I defined a variable called collapeId which is successfully getting the value 11. I then use this variable to try and set attributes href, data-target in the <a> element and id in the <div> element. The problem I'm having is that I get href="%0A%09%09%09%09#11" in my output for the href attribute but it sets the other attributes fine.

Any ideas why the same code is behaving differently with href and how I can fix this?

Given the following XSLT I've written.

<!-- Retrieve value of pardef attribute -->
<xsl:variable name="collapseId">
    <xsl:value-of select="sectiontitle/@pardef"/>
</xsl:variable>

<!--<a class="collapsed collapsible list-group-item" style="border-width: 0px 0px 1px; border-bottom-style: solid; border-bottom-color: #dddddd; margin-bottom: 0px; color: #646464 !important;" href="#a3" rel="nofollow" data-target="#a3" data-toggle="collapse"> --> 
<a class="collapsed collapsible list-group-item" style="border-width: 0px 0px 1px; border-bottom-style: solid; border-bottom-color: #dddddd; margin-bottom: 0px; color: #646464 !important;" rel="nofollow" data-toggle="collapse"> 
    <xsl:attribute name="data-target">
        #<xsl:value-of select="$collapseId"/>
    </xsl:attribute>    
    <xsl:attribute name="href">
        #<xsl:value-of select="$collapseId" />
    </xsl:attribute>    

    <xsl:value-of select="sectiontitle"/>
</a>

<div class="collapse" style="margin: 10px 20px;">
    <xsl:attribute name="id">
        #<xsl:value-of select="$collapseId"/>
    </xsl:attribute>
    <xsl:apply-templates select="par" />
</div>

I get the following output.

<a class="collapsed collapsible list-group-item" style="border-width: 0px 0px 1px; border-bottom-style: solid; border-bottom-color: #dddddd; margin-bottom: 0px; color: #646464 !important;" rel="nofollow" data-toggle="collapse" data-target="
            #11" href="%0A%09%09%09%09#11">Anchor Title</a>
                            <div class="collapse" style="margin: 10px 20px;" id="
            #11">
                                <p>Data 1</p>
                                <p/>
                                <p>Data 2  </p>
                                <p/>
                                <p>Data 3</p>
                            </div>

Thanks all!

Answer 1

You are creating the attribute like so

<xsl:attribute name="href">
    #<xsl:value-of select="$collapseId" />
</xsl:attribute>  

But you have indented the text node containing # . This means it is not just adding # to the attribute, but the new line, and spaces, before it.

Change it to this

<xsl:attribute name="href">
    <xsl:text>#</xsl:text>
    <xsl:value-of select="$collapseId" />
</xsl:attribute>  

The difference here is that XSLT will ignore "whitespace only" text nodes, so in this case the newline and spaces won't get output.

Note, if you could use XSLT 2.0, you could do this

<xsl:attribute name="href" select="concat('#', $collapseId)" />

Also note, it would be more efficienet to declare the collapseId variable like so

<xsl:variable name="collapseId" select="sectiontitle/@pardef"/>