title: Javascript and JQUERY: opening and closing divs using click function
body: <p>I am building an online interactive map for Taiwan census data and I have a javascript question. </p>
  
  <p>The map takes the full width and height of the page but when two divs are clicked (click_1956 and click_1966) two containers open on the right side of the page and the width of the map shrinks accordingly. </p>
  
  <p>In these containers graphs are shown. Each container has a div inside that hosts the graphs. </p>
  
  <p>Everything works, but if I click click_1956 and chart_container_1956 opens, and then click click_1966 and chart_container_1966 opens, when I click click_1966 again to close the chart_container_1966, then chart_container_1956 is still open. I would like all the containers to close when any of them is closed. </p>
  
  <p>I hope this makes sense. I pasted the code below. I apologize if it doesn't make sense. This is my first time using this website. Thank you!        </p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#charts_container_1956 {
          position:absolute;
          bottom:0;
          width:0;
          height:100%;
          z-index:10;
          background:#FAFAFF; 
          display:none;
      }
  #chart_1956 {
      position:absolute;
      bottom:0px;
      top:0;
      width:78%;
      height:100%;
      float:left;
      left:21%;
      z-index:1000;
      background:#B6CEFF; 
      display: none;
  }
  
  #click_1956{
      width:25px;
      height:25px;
      opacity:0.85;
      background-image:url("images/chart.png");
      background-size:100%;
      background-repeat:no-repeat;
      background-position:center;
      cursor: pointer;
      margin-left:10px;
      margin-bottom:6px;
  }
  
  #click_1956:hover {
      background-color: #B6CEFF;
  }
  
  #charts_container_1966 {
      position:absolute;
      bottom:0;
      width:0;
      height:100%;
      z-index:10;
      background:#FAFAFF; 
      display:none;
  }
  
  #chart_1966 {
      position:absolute;
      bottom:0px;
      top:0;
      width:78%;
      height:100%;
      float:left;
      left:21%;
      z-index:1000;
      background:#B6CEFF; 
      display: none;
  }
  
  #click_1966{
      width:25px;
      height:25px;
      opacity:0.85;
      background-image:url("images/chart.png");
      background-size:100%;
      background-repeat:no-repeat;
      background-position:center;
      cursor: pointer;
      margin-left:10px;
      margin-bottom:6px;
  }
  
  #click_1966:hover {
      background-color: #B6CEFF;
  }
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>$(document).ready(function(){   
  $('#click_1956').click(function() {
    var clicks = $(this).data('clicks');
    if (clicks) {
    $("#map").animate({
      width: "100%"
    }, 300 );
      $('#charts_container_1956').animate({
          width: "0"
      },300);
      $("#chart_1956").fadeToggle(100);
    } else {
     $("#map").animate({
      width: "20.5%"
    }, 300 );
      $('#charts_container_1956').animate({
          width: "79.5%"
      },300);
      $("#chart_1956").fadeToggle(1000)
    }   
      $(this).data("clicks", !clicks);
     });
    });
  
    $(function () {
    var categories = ['0-4', '5-9', '10-14', '15-19',
          '20-24', '25-29', '30-34', '35-39', '40-44',
          '45-49', '50-54', '55-59', '60-64', '65-69',
          '70-74', '75-79', '80-84', '85-89', '90-94',
          '95-99', '100 + '];
    $(document).ready(function () {
      $('#chart_container_1956').highcharts({
          chart: {
              type: 'bar'
          },
          title: {
              text: '人口金字塔'
          },
          subtitle: {
              text: '1956年'
          },
          credits: {
              enabled: false
          },
          exporting: {
              enabled: false
          },
          xAxis: [{
              categories: categories,
              reversed: false,
              labels: {
                  step: 1
              }
          }, { // mirror axis on right side
              opposite: true,
              reversed: false,
              categories: categories,
              linkedTo: 0,
              labels: {
                  step: 1
              }
          }],
          yAxis: {
              title: {
                  text: null
              },
              labels: {
                  formatter: function () {
                      return (Math.abs(this.value) / 1000000) + 'M';
                  }
              },
              min: -2000000,
              max: 2000000
          },
  
          plotOptions: {
              series: {
                  stacking: 'normal'
              }
          },
  
          tooltip: {
              formatter: function () {
                  return '&lt;b&gt;' + this.series.name + ', age ' + this.point.category + '&lt;/b&gt;&lt;br&gt;' +
                      'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
              }
          },
          series: [{
              name: '男',
              data: [-930097, -708733, -478299, -487623, -336419, -362280, -325520, -281719, -251974, -205500, -153693, -109738, -71686, -47206, -45708, -0, -0, -0, -0, -0, -0]
          }, {
              name: '女',
              data: [886484,  670598, 448470, 463230, 403966, 356909, 297371, 240970, 203159, 173283, 133860, 105011, 74621,  57448,  78806, 0, 0, 0, 0, 0, 0]
          }]
      });
  });
  </code></pre>
  
  <p>});</p>
  
  <pre><code>$(document).ready(function(){   
  $('#click_1966').click(function() {
    var clicks = $(this).data('clicks');
    if (clicks) {
    $("#map").animate({
      width: "100%"
    }, 300 );
      $('#charts_container_1966').animate({
          width: "0"
      },300);
      $("#chart_1966").fadeToggle(100);
    } else {
     $("#map").animate({
      width: "20.5%"
    }, 300 );
      $('#charts_container_1966').animate({
          width: "79.5%"
      },300);
      $("#chart_1966").fadeToggle(1000) 
  }   
    $(this).data("clicks", !clicks);
  });
  </code></pre>
  
  <p>});</p>
  
  <pre><code>$(function () {
  var categories = ['0-4', '5-9', '10-14', '15-19',
          '20-24', '25-29', '30-34', '35-39', '40-44',
          '45-49', '50-54', '55-59', '60-64', '65-69',
          '70-74', '75-79', '80-84', '85-89', '90-94',
          '95-99', '100 + '];
  $(document).ready(function () {
      $('#chart_container_1966').highcharts({
          chart: {
              type: 'bar'
          },
          title: {
              text: '人口金字塔'
          },
          subtitle: {
              text: '1966年'
          },
          credits: {
              enabled: false
          },
          exporting: {
              enabled: false
          },
          xAxis: [{
              categories: categories,
              reversed: false,
              labels: {
                  step: 1
              }
          }, { // mirror axis on right side
              opposite: true,
              reversed: false,
              categories: categories,
              linkedTo: 0,
              labels: {
                  step: 1
              }
          }],
          yAxis: {
              title: {
                  text: null
              },
              labels: {
                  formatter: function () {
                      return (Math.abs(this.value) / 1000000) + 'M';
                  }
              },
              min: -2000000,
              max: 2000000
          },
  
          plotOptions: {
              series: {
                  stacking: 'normal'
              }
          },
  
          tooltip: {
              formatter: function () {
                  return '&lt;b&gt;' + this.series.name + ', age ' + this.point.category + '&lt;/b&gt;&lt;br&gt;' +
                      'Population: ' + Highcharts.numberFormat(Math.abs(this.point.y), 0);
              }
          },
          series: [{
              name: '男',
              data: [-1018498, -996308, -919856, -682964, -324702, -461254, -430342, -436479, -377743, -306094, -261970, -185797, -127501, -79309, -43250, -20839, -11100, -0, -0, -0, -0]
          }, {
              name: '女',
              data: [959981, 943937, 872920,  671050, 446428, 458478, 399311, 354333, 293547, 234241, 195507, 161451, 119448, 86079, 54002, 32911, 25133, 0, 0, 0, 0]
          }]
      });
  });
  </code></pre>
  
  <p>});</p>