How to load an html inside main index html on button click

Question

Use case:

I have designed a sidbar navigation using HTML and CSS\\Js as shown below. lets name this index.html

I

Answer 1

You can try something like this:

Index.html

 
......


    .......
    //your sidebar here
   dashboard
    Live Execution>

Then you will have a JS file which will handle the rest of the pages.

Content.js

//initialise the pages

var execContent = undefined;
var scheduleContent = undefined;

function loadPages() {

    // initialize your panels here
    $("#divSearchPanel").load("Pages/Search/search.html", function (response, status, xhr) {

        //progress
        $("#divProgressLoader").load("Pages/Search/progress.html", function (response, status, xhr) {
            loadProgress.init($("#divProgressLoader"));
        });

        searchPage.init($("#divSearchPanel"));

        //dashboard
        loadSinglePage("dashboard");
    });
   //call the loadpage function
   loadPage("dashboard");

}

//load the page


   function loadSinglePage(pageId) {

    currentPage = pageId;
    var contentDiv = $("#divPageContent");
    contentDiv.html("");

    if (pageId == "dashboard") {
        contentDiv.load("Pages/Dashboard/dashboard.html", function (response, status, xhr) {
            dashboardContent.init(contentDiv);
        });
    }

    if (pageId == "liveexec") {
        contentDiv.load("file/location/liveexec.html", function (response, status, xhr) {
            execContent .init(contentDiv);
        });
    }

Then your pages will look live this:

liveexec.html