如何使用javascript显示和隐藏嵌套的div

我有两个部门，如下所示：

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

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

我在这里提供的代码如下所示： 当我点击土壤触发器时，它会显示土壤数据的时间序列下的图表，但不会显示系统序列和集群序列下的任何内容

同样，当我点击“水触发器”时，它会在水数据的时间序列下显示图表，但不会在系统序列和集群序列下显示任何内容

当我点击土壤触发器时，它会显示土壤数据的时间序列、系统序列和聚类序列下的三个不同图表。当我再次点击“水触发”按钮时，它会在水数据的时间序列、系统序列和聚类序列下显示三个不同的图表

如何通过更改代码来实现这一点。请帮忙

谢谢

您的代码可以像这样分解，这是一个快速的重新分解，并且容易出错。也许你现在可以自己调试了

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

---

我不清楚你的答案。请告诉我实施的一般方法。例如：我有一个触发器。当我单击触发器时，它将呈现三个选项卡。我将分别显示选项卡。当我点击一个标签时，其他人就会隐藏起来。谢谢

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";
    }
}

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