Unable to put href links to expand results in xml

I designed a xslt file for a list view of house names from xml. And when a house name is clicked from the list, it should show full detail of the house which is in same xml file. But in my case it's redirecting to another place. Can someone help me?

<Houses>
    <search>
        <id>1</id>
        <name>horror</name>
        <address>09, west Road</address>
        <city>London</city>
        <pcode>se4 7jk</pcode>
        <contact>020574110832</contact>
        </search>
</Houses>

And the problem part of xslt file

<xsl:template match="name">
     <xsl:attribute name="href">
     <xsl:value-of select="//search/name"/>
     </xsl:attribute>
</xsl:template>

I assume you wish to add a link to each name. In that case you will need something like

<xsl:template match="name">
    <a>
        <xsl:attribute name="href">
            <xsl:text>#</xsl:text><xsl:value-of select="."/>
        </xsl:attribute>
        <xsl:value-of select="."/>
    </a>
</xsl:template>

This will create elements like <a href="#horror">horror</a>

EDIT

OK here's an example of a table with div elements that collapse/expand by clicking the button. Nice layout I left to do for you; it's just meant as an example of how to create an html using xslt including javascript toggle hide/show.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" version="1.0" encoding="UTF-8" indent="yes"/>

    <xsl:template match="/">
        <html>
            <head>
                <title>trial</title>
                <script type="text/javascript" language="javascript">
                    //expand and collapse functions based on id
                    function toggleById(IdStart) {
                    var divs = document.getElementsByTagName('div');
                    for (var i=0<xsl:text>;</xsl:text> i&lt;divs.length<xsl:text>;</xsl:text> i++) {
                    if (divs[i].id.match("^"+IdStart) == IdStart) { 
                        if( divs[i].style.display == "none")
                            {
                            divs[i].style.display = "block"
                            }
                        else    {
                            divs[i].style.display = "none"
                            }
                    }
                    }
                    return true;
                    }

                </script>
            </head>
            <body>
                <table border="solid black 1pt;" style="border-collapse:collapse;padding:0;border-spacing:0">
                    <tr>
                        <th>house name</th>
                        <th>details</th>
                    </tr>
                    <xsl:apply-templates/>
                </table>
            </body>
        </html>
    </xsl:template>

    <xsl:template match="name">
        <tr>
            <td>
                <input>
                    <xsl:attribute name="type">button</xsl:attribute>
                    <xsl:attribute name="onclick">toggleById('<xsl:value-of select="."/>'); return true;</xsl:attribute>
                    <xsl:attribute name="onMouseOver">this.style.cursor='hand'</xsl:attribute>
                    <xsl:attribute name="value"><xsl:value-of select="."/></xsl:attribute>
                </input>
            </td>
            <td>
                <div>
                    <xsl:attribute name="id"><xsl:value-of select="."/></xsl:attribute>
                    <xsl:attribute name="style">display:none</xsl:attribute>
                    <xsl:copy-of select=".."/>
                </div>
            </td>
        </tr>
    </xsl:template>

    <xsl:template match="text()"/>

</xsl:stylesheet>

When applied to

<?xml version="1.0" encoding="UTF-8"?>
<Houses>
    <search>
        <id>1</id>
        <name>horror</name>
        <address>09, west Road</address>
        <city>London</city>
        <pcode>se4 7jk</pcode>
        <contact>020574110832</contact>
    </search>
    <search>
        <id>2</id>
        <name>nice</name>
        <address>05, East Road</address>
        <city>London</city>
        <pcode>po4 3df</pcode>
        <contact>none</contact>
    </search>
</Houses>

This gives

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>trial</title>
        <script type="text/javascript" language="javascript">
                    //expand and collapse functions based on id
                    function toggleById(IdStart) {
                    var divs = document.getElementsByTagName('div');
                    for (var i=0; i<divs.length; i++) {
                    if (divs[i].id.match("^"+IdStart) == IdStart) { 
                        if( divs[i].style.display == "none")
                            {
                            divs[i].style.display = "block"
                            }
                        else    {
                            divs[i].style.display = "none"
                            }
                    }
                    }
                    return true;
                    }

                </script>
    </head>
    <body>
        <table border="solid black 1pt;" style="border-collapse:collapse;padding:0;border-spacing:0">
            <tr>
                <th>house name</th>
                <th>details</th>
            </tr>
            <tr>
                <td><input type="button" onclick="toggleById('horror'); return true;" onMouseOver="this.style.cursor='hand'" value="horror"></td>
                <td>
                    <div id="horror" style="display:none">
                        <search>
                            <id>1</id>
                            <name>horror</name>
                            <address>09, west Road</address>
                            <city>London</city>
                            <pcode>se4 7jk</pcode>
                            <contact>020574110832</contact>
                        </search>
                    </div>
                </td>
            </tr>
            <tr>
                <td><input type="button" onclick="toggleById('nice'); return true;" onMouseOver="this.style.cursor='hand'" value="nice"></td>
                <td>
                    <div id="nice" style="display:none">
                        <search>
                            <id>2</id>
                            <name>nice</name>
                            <address>05, East Road</address>
                            <city>London</city>
                            <pcode>po4 3df</pcode>
                            <contact>none</contact>
                        </search>
                    </div>
                </td>
            </tr>
        </table>
    </body>
</html>

Try it out in a browser and you will experience the expand/collapse behavior.