Creating a collapsible and expandable menu tree from XML with XSL: A step-by-step guide

Question

Creating a collapsible and expandable menu tree from XML with XSL: A step-by-step guide

My XML file is structured as follows:

<WORLD>
<COUNTRY COUNTRYID="INDIA">
<STATE STATEID="ANDHRAPRADESH">
<CITY>HYDERABAD</CITY>
<CITY>VIZAG</CITY>
<CITY>KURNOOL</CITY>
</STATE>
<STATE STATEID="TAMILNADU">
<CITY>CHENNAI</CITY>
<CITY>COIMBATORE</CITY>
<CITY>SALEM</CITY>
</STATE>
<STATE STATEID="KARNATAKA">
<CITY>BANGALORE</CITY>
<CITY>MYSORE</CITY>
<CITY>BALLARI</CITY>
</STATE>
</COUNTRY>
<COUNTRY COUNTRYID="AUSTRALIA">
<STATE STATEID="NEW SOUTH WALES">
<CITY>PERTH</CITY>
<CITY>BRIABANE</CITY>
<CITY>HOBART</CITY>
</STATE>
</COUNTRY>
</WORLD>

I am looking to create an expandable/collapsible tree structure using XSL and possibly some javascript, complete with plus and minus signs.

> WORLD  |  |
>     INDIA
>           |
>           |
>            ANDHRAPRADESH
>                      |
>                      |
>                   HYDERABAD
>                   VIZAG
>                   KURNOOL
>            KARNATAKA
>                      |
>                      |
>                   BANGALORE
>                   BALLARI   
>             AUSTRALIA  
>                |
>                |
>             NEW SOUTH WALES
>                    |
>                    |
>                    PERTH
>                    BRIABANE

Is it possible to achieve this using just XSL, along with the potential addition of some javascript or pure CSS?

The sample XML I have provided is from a general form of the problem mentioned. My goal is to create a similar interactive tree structure like the one demonstrated here, but solely through XSL transformation of my XML document. Any suggestions?

Note: I do not have much experience with XSL or javascript, however, I do have some familiarity with Python. If there is a Python library or solution that can help, please advise.

javascript css python-2.7 xslt

Answer 1

Answer №1

If you wish to implement the code provided in the link, below is a sample stylesheet that creates a nested, unordered ul list structure. It uses the Javascript and CSS code along with images from the linked sample; however, in a real scenario, you may need to copy the images and host them on your server:

<xsl:stylesheet
  version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html" version="5.0" indent="yes" doctype-system="about:legacy-compat"/>

<xsl:template match="/">
  <html>
    <head>
      <title>list test</title>
      <style>
/********************/
/* EXPANDABLE LIST  */
/********************/
#listContainer{
  margin-top:15px;
}

#expList ul, li {
    list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;
}
#expList p {
    margin:0;
    display:block;
}
#expList p:hover {
    background-color:#121212;
}
#expList li {
    line-height:140%;
    text-indent:0px;
    background-position: 1px 8px;
    padding-left: 20px;
    background-repeat: no-repeat;
}

/* Collapsed state for list element */
#expList .collapsed {
    background-image: url(http://jasalguero.com/demos/expandableList/img/collapsed.png);
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
    background-image: url(http://jasalguero.com/demos/expandableList/img/expanded.png);
}
#expList {
    clear: both;
}

.listControl{
  margin-bottom: 15px;
}
.listControl a {
    border: 1px solid #555555;
    color: #555555;
    cursor: pointer;
    height: 1.5em;
    line-height: 1.5em;
    margin-right: 5px;
    padding: 4px 10px;
}
.listControl a:hover {
    background-color:#555555;
    color:#222222; 
    font-weight:normal;
}      
      </style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      <script>
/**************************************************************/
/* Prepares the cv to be dynamically expandable/collapsible   */
/**************************************************************/
function prepareList() {
    $('#expList').find('li:has(ul)')
    .click( function(event) {
        if (this == event.target) {
            $(this).toggleClass('expanded');
            $(this).children('ul').toggle('medium');
        }
        return false;
    })
    .addClass('collapsed')
    .children('ul').hide();

    //Create the button funtionality
    $('#expandList')
    .unbind('click')
    .click( function() {
        $('.collapsed').addClass('expanded');
        $('.collapsed').children().show('medium');
    })
    $('#collapseList')
    .unbind('click')
    .click( function() {
        $('.collapsed').removeClass('expanded');
        $('.collapsed').children().hide('medium');
    })

};


/**************************************************************/
/* Functions to execute on loading the document               */
/**************************************************************/
$(document).ready( function() {
    prepareList()
});      
      </script>
    </head>
    <body>
      <xsl:apply-templates/>
    </body>
  </html>
</xsl:template>

<xsl:template match="WORLD">
        <div id="listContainer">
            <div class="listControl">
                <a id="expandList">Expand All</a>
                <a id="collapseList">Collapse All</a>
            </div>
            <ul id="expList">
              <li>World
                 <xsl:apply-templates/>
              </li>
            </ul>
         </div>
</xsl:template>

<xsl:template match="COUNTRY">
  <ul>
    <li><xsl:value-of select="@COUNTRYID"/>
      <xsl:apply-templates/>
    </li>
  </ul>
</xsl:template>

<xsl:template match="STATE">
  <ul>
    <li><xsl:value-of select="@COUNTRYID | @STATEID"/>
      <ul>
        <xsl:apply-templates/>
      </ul>
    </li>
  </ul>
</xsl:template>

<xsl:template match="CITY">
  <li>
    <xsl:apply-templates/>
  </li>
</xsl:template>

</xsl:stylesheet>

The XML document then simply refers to above XSLT with

<?xml-stylesheet type="text/xsl" href="sheet1.xsl"?>
<WORLD>
<COUNTRY COUNTRYID="INDIA">
<STATE STATEID="ANDHRAPRADESH">
<CITY>HYDERABAD</CITY>
<CITY>VIZAG</CITY>
<CITY>KURNOOL</CITY>
</STATE>
<STATE STATEID="TAMILNADU">
<CITY>CHENNAI</CITY>
<CITY>COIMBATORE</CITY>
<CITY>SALEM</CITY>
</STATE>
<STATE STATEID="KARNATAKA">
<CITY>BANGALORE</CITY>
<CITY>MYSORE</CITY>
<CITY>BALLARI</CITY>
</STATE>
</COUNTRY>
<COUNTRY COUNTRYID="AUSTRALIA">
<STATE STATEID="NEW SOUTH WALES">
<CITY>PERTH</CITY>
<CITY>BRIABANE</CITY>
<CITY>HOBART</CITY>
</STATE>
</COUNTRY>
</WORLD>

Answer 2

If you wish to implement the code provided in the link, below is a sample stylesheet that creates a nested, unordered ul list structure. It uses the Javascript and CSS code along with images from the linked sample; however, in a real scenario, you may need to copy the images and host them on your server:

<xsl:stylesheet
  version="1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:output method="html" version="5.0" indent="yes" doctype-system="about:legacy-compat"/>

<xsl:template match="/">
  <html>
    <head>
      <title>list test</title>
      <style>
/********************/
/* EXPANDABLE LIST  */
/********************/
#listContainer{
  margin-top:15px;
}

#expList ul, li {
    list-style: none;
    margin:0;
    padding:0;
    cursor: pointer;
}
#expList p {
    margin:0;
    display:block;
}
#expList p:hover {
    background-color:#121212;
}
#expList li {
    line-height:140%;
    text-indent:0px;
    background-position: 1px 8px;
    padding-left: 20px;
    background-repeat: no-repeat;
}

/* Collapsed state for list element */
#expList .collapsed {
    background-image: url(http://jasalguero.com/demos/expandableList/img/collapsed.png);
}
/* Expanded state for list element
/* NOTE: This class must be located UNDER the collapsed one */
#expList .expanded {
    background-image: url(http://jasalguero.com/demos/expandableList/img/expanded.png);
}
#expList {
    clear: both;
}

.listControl{
  margin-bottom: 15px;
}
.listControl a {
    border: 1px solid #555555;
    color: #555555;
    cursor: pointer;
    height: 1.5em;
    line-height: 1.5em;
    margin-right: 5px;
    padding: 4px 10px;
}
.listControl a:hover {
    background-color:#555555;
    color:#222222; 
    font-weight:normal;
}      
      </style>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
      <script>
/**************************************************************/
/* Prepares the cv to be dynamically expandable/collapsible   */
/**************************************************************/
function prepareList() {
    $('#expList').find('li:has(ul)')
    .click( function(event) {
        if (this == event.target) {
            $(this).toggleClass('expanded');
            $(this).children('ul').toggle('medium');
        }
        return false;
    })
    .addClass('collapsed')
    .children('ul').hide();

    //Create the button funtionality
    $('#expandList')
    .unbind('click')
    .click( function() {
        $('.collapsed').addClass('expanded');
        $('.collapsed').children().show('medium');
    })
    $('#collapseList')
    .unbind('click')
    .click( function() {
        $('.collapsed').removeClass('expanded');
        $('.collapsed').children().hide('medium');
    })

};


/**************************************************************/
/* Functions to execute on loading the document               */
/**************************************************************/
$(document).ready( function() {
    prepareList()
});      
      </script>
    </head>
    <body>
      <xsl:apply-templates/>
    </body>
  </html>
</xsl:template>

<xsl:template match="WORLD">
        <div id="listContainer">
            <div class="listControl">
                <a id="expandList">Expand All</a>
                <a id="collapseList">Collapse All</a>
            </div>
            <ul id="expList">
              <li>World
                 <xsl:apply-templates/>
              </li>
            </ul>
         </div>
</xsl:template>

<xsl:template match="COUNTRY">
  <ul>
    <li><xsl:value-of select="@COUNTRYID"/>
      <xsl:apply-templates/>
    </li>
  </ul>
</xsl:template>

<xsl:template match="STATE">
  <ul>
    <li><xsl:value-of select="@COUNTRYID | @STATEID"/>
      <ul>
        <xsl:apply-templates/>
      </ul>
    </li>
  </ul>
</xsl:template>

<xsl:template match="CITY">
  <li>
    <xsl:apply-templates/>
  </li>
</xsl:template>

</xsl:stylesheet>

The XML document then simply refers to above XSLT with

<?xml-stylesheet type="text/xsl" href="sheet1.xsl"?>
<WORLD>
<COUNTRY COUNTRYID="INDIA">
<STATE STATEID="ANDHRAPRADESH">
<CITY>HYDERABAD</CITY>
<CITY>VIZAG</CITY>
<CITY>KURNOOL</CITY>
</STATE>
<STATE STATEID="TAMILNADU">
<CITY>CHENNAI</CITY>
<CITY>COIMBATORE</CITY>
<CITY>SALEM</CITY>
</STATE>
<STATE STATEID="KARNATAKA">
<CITY>BANGALORE</CITY>
<CITY>MYSORE</CITY>
<CITY>BALLARI</CITY>
</STATE>
</COUNTRY>
<COUNTRY COUNTRYID="AUSTRALIA">
<STATE STATEID="NEW SOUTH WALES">
<CITY>PERTH</CITY>
<CITY>BRIABANE</CITY>
<CITY>HOBART</CITY>
</STATE>
</COUNTRY>
</WORLD>

Creating a collapsible and expandable menu tree from XML with XSL: A step-by-step guide

Answer №1

Similar questions

Twitter bootstrap does not support the display of Glyphicons

Styling Result received from Web API call within an array

Observing changes in VueJS using $watch and accessing DOM elements

Achieve inline or floating displays seamlessly without the need for media queries to prevent breaking

How can I incorporate javaScript libraries such as camanjs, lena.js, and jimp into my Angular application?

Step-by-step guide: How to serialize a form using Express

Customizing Column Visibility in AgGrid React

Utilizing JavaScript to access and parse an XML file within a client-side environment

Error is caused by state variable triggering mutation

Utilizing HighCharts in Your Project

"Potential Memory Leak Issue: Assigning dataUrl to img.src May Cause Memory

Encountering issues with custom.css.scss not being properly overridden in Rails while using Bootstrap

Struggling to establish a connection with AngularJS

Customizing an external module class using CSS module pattern in React

What causes the occurrence of the error message "Please input a valid date" in jquery.validate.js?

Guide on showcasing the most recent four blog entries using JSON API within a div element

My app.js failed to launch on Heroku, receiving a Code H10 status 503 error

Increasing the margin-left automatically in Bootstrap 3.0.0

Stagnant updates in component's styling

Ways to obtain the value associated with a particular key within an object and its descendant elements?