I have a field within a database that stores some XML data. I display this data onto a page within an application that I am creating. I currently display the data on a jquery toggle like so...

```
<a  data-toggle="collapse" data-target="#demo">
    @Html.DisplayNameFor(model => model.AllXml)
</a>
<div id="demo" class="collapse">
    <div class="display-field">
        <p> @Html.DisplayFor(model => model.AllXml)</p>
</div>

```

The problem I am facing is that when the data is displayed on the page, it is not readable at all, as you would expect. I am wanting to make the XML data that is displayed on the page more readable. I have had a look at both Beautify and TreeView but I have no idea how this could be implemented to my solution.
Could somebody please point me in the right direction?

Thanks in advance