Untitled

<div data-role="collapsible" data-collapsed="true">
    <h3>Accordion Concept</h3>
    <p>The accordion concept splits the page into catagories to save space. Each catagory contains information but this information is collapsed in order to make it so you only see the information you want to see on the page.</p>
    <div id = "loadEx">Click Here to Load Example Script File</div>
    <script>
        $( "#loadEx" ).click(function() {
            $('#hello').load('mywebpage.txt');
        });
    </script>
    <pre id = "hello"></pre>
</div>

<body class="container">
    <div data-role="page">
        <div data-role="header">
            <h1> Page  One Title </h1>
        </div>
        <div data-role="content">
            <div data-role="collapsible-set" >
                <div data-role="collapsible" data-collapsed="true">
                    <h3> Header number one </h3>
                    <p> information for header number one is here. </p>
                </div>
                <div data-role="collapsible" data-collapsed="true">
                    <h3> Header number two </h3>
                    <p> information for header number two is here. </p>
                </div>
                <div data-role="collapsible" data-collapsed="true">
                    <h3> Header number three </h3>
                    <p> information for header number three is here. </p>
                </div>
            </div>
            <div data-role="footer">
                Copyright
            </div>
        </div>

</body>

$( "#loadEx" ).click(function() {
            $.get('mywebpage.txt', function (data) {
                $('#hello').text(data);
            });
        });