如何使用JavaScript显示和隐藏嵌套的DIV

Question

I have two divs like following:

 <div id="soil-trigger" 
                    onclick="getWidgetData('soil-trigger'); getWidgetSoilChart();"></div>

 <div id="water-trigger" 
                    onclick="getWidgetData('water-trigger'); getWidgetWaterChart();"></div>

Clicking on one div (ie: soil-trigger/water-trigger) generates a chart under time-series panel. For doing this I am using follwoing JS:

 function getWidgetData(name){

        var curEl = document.getElementById('time-series');
        curEl.className = "active";

        var el7 = document.getElementById('system-series');
        var el8 = document.getElementById('cluster-series');

        var curE2 = document.getElementById('system-health');
        var curE3 = document.getElementById('cluster-info');

        curE2.className = "";
        curE3.className = "";

        el7.className = "hide";
        el8.className = "hide";

        widgetEl = document.getElementById("soil-chart");

        widgetEl5 = document.getElementById("water-chart");


        var el = document.getElementById('soil-chart');
        el.className = "";

        var el5 = document.getElementById('water-chart');
        el5.className = "";

        if(name == 'soil-trigger'){
         widgetEl.innerHTML = document.getElementById('soil-chart').outerHTML; 

            el.className = "show";
            el5.className = "hide";

              }

        if(name == 'water-trigger') {

        widgetEl5.innerHTML = document.getElementById('water-chart').outerHTML; 
    el5.className = "show";
        el.className = "hide";

                      }
}

My code that I provided here is working like this: When I click on soil-trigger it is showing chart under time-series for soil-data, but not showing anything under system-series and cluster-series.

Again, when I click on water-trigger it is showing chart under time-series for water-data, but not showing anything under system-series and cluster-series.

What I actually need when I will click on soil-trigger it will show three different charts under time-series, system-series, and cluster-series for soil data. Again when I will click on water-trigger it will show three different charts under time-series, system-series, and cluster-series for water data.

How can I achieve that by changing my code. Any help please.

Thanks

Answer 1

function getWidgetData(name) {
    var timeSeries = document.getElementById('time-series'),
        systemSeries = document.getElementById('system-series'),
        clusterSeries = document.getElementById('cluster-series'),
        systemHealth = document.getElementById('system-health'),
        clusterInfo = document.getElementById('cluster-info'),
        waterChart = document.getElementById("water-chart"),
        soilChart = document.getElementById('soil-chart');

    timeSeries.className = "active";
    systemHealth.className = "";
    clusterInfo.className = "";
    systemSeries.className = "hide";
    clusterSeries.className = "hide";
    soilChart.className = "";
    waterChart.className = "";

    if (name == 'soil-trigger') {
        soilChart.innerHTML =soilChart.outerHTML;
        soilChart.className = "show";
        waterChart.className = "hide";
    }

    if (name == 'water-trigger') {
        waterChart.innerHTML = waterChart.outerHTML;
        waterChart.className = "show";
        soilChart.className = "hide";
    }
}

Your code can be broken down like this, its a quick re-factoring and prone to errors. May be you can debug this yourself now.

soilChart.innerHTML =soilChart.outerHTML;//??????????