how to make a google java

[ittimes]

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<style>
      .hdr {
      font-family: Arial;
      font-size: 16px;
      padding: 8px 10px 8px 10px;
      margin: 0px 0px 6px 0px;
   }
   .hdr_measures2_col {
      color:af140b;
      background-color:f2f2f2;
      border-bottom: solid 1px #000000;
      cursor: pointer; cursor: hand;
   }
   .hdr_measures2_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;
   }
   .hdr_measures_col {
      color:af140b;
      background-color:f2f2f2;
      border-bottom: solid 1px #000000;
      cursor: pointer; cursor: hand;
   }
   .hdr_measures_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;
   }
   .hdr_date_col {
      color:af140b;
      background-color:f2f2f2;
      border-bottom: solid 1px #000000;
      cursor: pointer; cursor: hand;
   }
   .hdr_date_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;
   }   
   
   .hdr_transactive_col {
      color:af140b;
      background-color:f2f2f2;
      border-bottom: solid 1px #000000;
      cursor: pointer; cursor: hand;
   }
   .hdr_transactive_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;
   }

   .hdr_cust_col {
      color:#7f7f00;
      background-color:#eaeaea;   
      border-bottom: solid 1px #7f7f00;
      cursor: pointer; cursor: hand;
   }
   .hdr_cust_exp {
      color:white;
      background-color:#7f7f00;   
      border: 0px 0px 0px 0px;
   }   
   .hdr_prod_col {
      /* color:#00a3e5; */
      color:af140b;
      background-color:f2f2f2;   
      border-bottom: solid 1px #000000;
      cursor: pointer; cursor: hand;
   }
   .hdr_prod_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;      
   }   
   .hdr_geo_col {
      /* color:#925fb0; */
      color:#7f7f00;
      background-color:#eaeaea;   
      border-bottom: solid 1px #7f7f00;
      cursor: pointer; cursor: hand;
   }
   .hdr_geo_exp {
      color:white;   
      background-color:#7f7f00;
      border: 0px 0px 0px 0px;
   }
   .hdr_com_col {
      /* color:#00a3e5; */
      color:af140b;
      background-color:f2f2f2;   
      border-bottom: solid 1px #000000;
      cursor: pointer; cursor: hand;
   }
   .hdr_com_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;      
   }   

   .hdr_xaxis_col {
      /* color:#00a3e5; */
      color:af140b;
      background-color:f2f2f2;   
      border-bottom: solid 1px #0000f00;
      cursor: pointer; cursor: hand;
   }
   .hdr_xaxis_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;      
   }   
   .hdr_vintage_col {
      /* color:#00a3e5; */
      color:af140b;
      background-color:f2f2f2;   
      border-bottom: solid 1px #0000f00;
      cursor: pointer; cursor: hand;
   }
   .hdr_vintage_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;      
   }   
   .hdr_appperiod_col {
      /* color:#00a3e5; */
      color:af140b;
      background-color:f2f2f2;   
      border-bottom: solid 1px #0000f00;
      cursor: pointer; cursor: hand;
   }
   .hdr_appperiod_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;      
   }   
      .hdr_statperiod_col {
      /* color:#00a3e5; */
      color:af140b;
      background-color:f2f2f2;   
      border-bottom: solid 1px #0000f00;
      cursor: pointer; cursor: hand;
   }
   .hdr_statperiod_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;      
   }

   .hdr_camp_col {
      /* color:#00a3e5; */
      color:af140b;
      background-color:f2f2f2;   
      border-bottom: solid 1px #0000f00;
      cursor: pointer; cursor: hand;
   }
   .hdr_camp_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;      
   }

   .hdr_activation_col {
      /* color:#00a3e5; */
      color:af140b;
      background-color:f2f2f2;   
      border-bottom: solid 1px #0000f00;
      cursor: pointer; cursor: hand;
   }
   .hdr_activation_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;      
   }

   .hdr_gtaa_col {
      /* color:#00a3e5; */
      color:af140b;
      background-color:f2f2f2;   
      border-bottom: solid 1px #0000f00;
      cursor: pointer; cursor: hand;
   }
   .hdr_gtaa_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;      
   }

   .hdr_airport_col {
      /* color:#00a3e5; */
      color:af140b;
      background-color:f2f2f2;   
      border-bottom: solid 1px #0000f00;
      cursor: pointer; cursor: hand;
   }
   .hdr_airport_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;      
   }

   .hdr_firstsecond_col {
      /* color:#00a3e5; */
      color:af140b;
      background-color:f2f2f2;   
      border-bottom: solid 1px #0000f00;
      cursor: pointer; cursor: hand;
   }
   .hdr_firstsecond_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;      
   }

   .hdr_custstat_col {
      /* color:#00a3e5; */
      color:af140b;
      background-color:f2f2f2;   
      border-bottom: solid 1px #0000f00;
      cursor: pointer; cursor: hand;
   }
   .hdr_custstat_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;      
   }

   .hdr_appsource_col {
      /* color:#00a3e5; */
      color:af140b;
      background-color:f2f2f2;   
      border-bottom: solid 1px #0000f00;
      cursor: pointer; cursor: hand;
   }
   .hdr_appsource_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;      
   }

   .hdr_appscore_col {
      /* color:#00a3e5; */
      color:af140b;
      background-color:f2f2f2;   
      border-bottom: solid 1px #0000f00;
      cursor: pointer; cursor: hand;
   }
   .hdr_appscore_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;      
   }

   .hdr_sumchannel_col {
      /* color:#00a3e5; */
      color:af140b;
      background-color:f2f2f2;   
      border-bottom: solid 1px #0000f00;
      cursor: pointer; cursor: hand;
   }
   .hdr_sumchannel_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;      
   }
   .hdr_solchannel_col {
      /* color:#00a3e5; */
      color:af140b;
      background-color:f2f2f2;   
      border-bottom: solid 1px #0000f00;
      cursor: pointer; cursor: hand;
   }
   .hdr_solchannel_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;      
   }

   .hdr_subgroup_col {
      /* color:#00a3e5; */
      color:af140b;
      background-color:f2f2f2;   
      border-bottom: solid 1px #0000f00;
      cursor: pointer; cursor: hand;
   }
   .hdr_subgroup_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;      
   }

   .hdr_prodgroup_col {
      /* color:#00a3e5; */
      color:af140b;
      background-color:f2f2f2;   
      border-bottom: solid 1px #0000f00;
      cursor: pointer; cursor: hand;
   }
   .hdr_prodgroup_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;      
   }

   .hdr_openmonth_col {
      /* color:#00a3e5; */
      color:af140b;
      background-color:f2f2f2;   
      border-bottom: solid 1px #0000f00;
      cursor: pointer; cursor: hand;
   }
   .hdr_openmonth_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;      
   }

   .hdr_treatment_col {
      /* color:#00a3e5; */
      color:af140b;
      background-color:f2f2f2;   
      border-bottom: solid 1px #0000f00;
      cursor: pointer; cursor: hand;
   }
   .hdr_treatment_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;      
   }

   .hdr_yaxis_col {
      /* color:#00a3e5; */
      color:af140b;
      background-color:f2f2f2;   
      border-bottom: solid 1px #0000f00;
      cursor: pointer; cursor: hand;
   }
   .hdr_yaxis_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;      
   }

   .hdr_custcohort_col {
      /* color:#00a3e5; */
      color:af140b;
      background-color:f2f2f2;   
      border-bottom: solid 1px #0000f00;
      cursor: pointer; cursor: hand;
   }
   .hdr_custcohort_exp {
      color:white;   
      background-color:af140b;
      border: 0px 0px 0px 0px;      
   }



</style>

<script>

   var $x = jQuery.noConflict();
   $x(document).ready(function () {
      
      //--- EVENT BINDINGS
      //for accordion headers
      $x("#d_ftr_hdr_date").on("click", function(){showFilterSection ("date");} );
      $x("#d_ftr_hdr_cust").on("click", function(){showFilterSection ("cust");} );
      $x("#d_ftr_hdr_prod").on("click", function(){showFilterSection ("prod");} );
      $x("#d_ftr_hdr_prod").on("click", function(){showFilterSection ("prod");} );
      $x("#d_ftr_hdr_geo").on("click", function(){showFilterSection ("geo");} );
      $x("#d_ftr_hdr_com").on("click", function(){showFilterSection ("com");} );
      $x("#d_ftr_hdr_xaxis").on("click", function(){showFilterSection ("xaxis");} );
      $x("#d_ftr_hdr_vintage").on("click", function(){showFilterSection ("vintage");} );

      $x("#d_ftr_hdr_appperiod").on("click", function(){showFilterSection ("appperiod");} );
      $x("#d_ftr_hdr_statperiod").on("click", function(){showFilterSection ("statperiod");} );
      $x("#d_ftr_hdr_camp").on("click", function(){showFilterSection ("camp");} );
      $x("#d_ftr_hdr_activation").on("click", function(){showFilterSection ("activation");} );
      $x("#d_ftr_hdr_gtaa").on("click", function(){showFilterSection ("gtaa");} );
      $x("#d_ftr_hdr_airport").on("click", function(){showFilterSection ("airport");} );
      $x("#d_ftr_hdr_firstsecond").on("click", function(){showFilterSection ("firstsecond");} );
      $x("#d_ftr_hdr_custstat").on("click", function(){showFilterSection ("custstat");} );      
      

      $x("#d_ftr_hdr_appsource").on("click", function(){showFilterSection ("appsource");} );
      $x("#d_ftr_hdr_appscore").on("click", function(){showFilterSection ("appscore");} );
      $x("#d_ftr_hdr_sumchannel").on("click", function(){showFilterSection ("sumchannel");} );
      $x("#d_ftr_hdr_solchannel").on("click", function(){showFilterSection ("solchannel");} );
      $x("#d_ftr_hdr_subgroup").on("click", function(){showFilterSection ("subgroup");} );
      $x("#d_ftr_hdr_prodgroup").on("click", function(){showFilterSection ("prodgroup");} );
      $x("#d_ftr_hdr_openmonth").on("click", function(){showFilterSection ("openmonth");} );
      $x("#d_ftr_hdr_treatment").on("click", function(){showFilterSection ("treatment");} );
      $x("#d_ftr_hdr_yaxis").on("click", function(){showFilterSection ("yaxis");} );
      $x("#d_ftr_hdr_custcohort").on("click", function(){showFilterSection ("custcohort");} );
      $x("#d_ftr_hdr_transactive").on("click", function(){showFilterSection ("transactive");} );
      $x("#d_ftr_hdr_measures").on("click", function(){showFilterSection ("measures");} );
$x("#d_ftr_hdr_measures2").on("click", function(){showFilterSection ("measures2");} );



      //--- INITIALIZATION
      showFilterSection("measures2"); 
         

   });

      function showFilterSection(which) {
      var hdr = "#d_ftr_hdr_" + which;
      var lst = "#d_ftr_lst_" + which;
      var tclass = "hdr hdr_" + which + "_exp";
      collapseAllFilterGroups();
      $x(hdr).removeClass().addClass(tclass);
      $x(lst).css("display", "block");

      if (which == "geo") {
         fixGeoFiltersOnReload();
      }
   }
   function collapseAllFilterGroups() {
      $x("#d_ftr_hdr_date").removeClass().addClass("hdr hdr_date_col");
      $x("#d_ftr_hdr_cust").removeClass().addClass("hdr hdr_cust_col");
      $x("#d_ftr_hdr_prod").removeClass().addClass("hdr hdr_prod_col");
      $x("#d_ftr_hdr_geo").removeClass().addClass("hdr hdr_geo_col");
      $x("#d_ftr_hdr_com").removeClass().addClass("hdr hdr_com_col");
      $x("#d_ftr_hdr_xaxis").removeClass().addClass("hdr hdr_xaxis_col");
      $x("#d_ftr_hdr_vintage").removeClass().addClass("hdr hdr_vintage_col");

      $x("#d_ftr_hdr_appperiod").removeClass().addClass("hdr hdr_appperiod_col");
      $x("#d_ftr_hdr_statperiod").removeClass().addClass("hdr hdr_statperiod_col");
      $x("#d_ftr_hdr_camp").removeClass().addClass("hdr hdr_camp_col");
      $x("#d_ftr_hdr_activation").removeClass().addClass("hdr hdr_activation_col");
      $x("#d_ftr_hdr_gtaa").removeClass().addClass("hdr hdr_gtaa_col");
      $x("#d_ftr_hdr_airport").removeClass().addClass("hdr hdr_airport_col");
      $x("#d_ftr_hdr_firstsecond").removeClass().addClass("hdr hdr_firstsecond_col");

      $x("#d_ftr_hdr_custstat").removeClass().addClass("hdr hdr_custstat_col");
      $x("#d_ftr_hdr_appsource").removeClass().addClass("hdr hdr_appsource_col");
      $x("#d_ftr_hdr_appscore").removeClass().addClass("hdr hdr_appscore_col");
      $x("#d_ftr_hdr_sumchannel").removeClass().addClass("hdr hdr_sumchannel_col");
      $x("#d_ftr_hdr_solchannel").removeClass().addClass("hdr hdr_solchannel_col");
      $x("#d_ftr_hdr_subgroup").removeClass().addClass("hdr hdr_subgroup_col");
      $x("#d_ftr_hdr_prodgroup").removeClass().addClass("hdr hdr_prodgroup_col");
      $x("#d_ftr_hdr_openmonth").removeClass().addClass("hdr hdr_openmonth_col");
      $x("#d_ftr_hdr_treatment").removeClass().addClass("hdr hdr_treatment_col");
      $x("#d_ftr_hdr_yaxis").removeClass().addClass("hdr hdr_yaxis_col");
      $x("#d_ftr_hdr_custcohort").removeClass().addClass("hdr hdr_custcohort_col");
      $x("#d_ftr_hdr_transactive").removeClass().addClass("hdr hdr_transactive_col");
      $x("#d_ftr_hdr_measures").removeClass().addClass("hdr hdr_measures_col");
      $x("#d_ftr_hdr_measures2").removeClass().addClass("hdr hdr_measures2_col");


      $x("#d_ftr_lst_date").css("display", "none");
      $x("#d_ftr_lst_cust").css("display", "none");
      $x("#d_ftr_lst_prod").css("display", "none");
      $x("#d_ftr_lst_geo").css("display", "none");
      $x("#d_ftr_lst_com").css("display", "none");
      $x("#d_ftr_lst_xaxis").css("display", "none");
      $x("#d_ftr_lst_vintage").css("display", "none");


      $x("#d_ftr_lst_appperiod").css("display", "none");
      $x("#d_ftr_lst_statperiod").css("display", "none");
      $x("#d_ftr_lst_camp").css("display", "none");
      $x("#d_ftr_lst_activation").css("display", "none");
      $x("#d_ftr_lst_gtaa").css("display", "none");
      $x("#d_ftr_lst_airport").css("display", "none");
      $x("#d_ftr_lst_firstsecond").css("display", "none");

      $x("#d_ftr_lst_custstat").css("display", "none");
      $x("#d_ftr_lst_appsource").css("display", "none");
      $x("#d_ftr_lst_appscore").css("display", "none");
      $x("#d_ftr_lst_sumchannel").css("display", "none");
      $x("#d_ftr_lst_solchannel").css("display", "none");
      $x("#d_ftr_lst_subgroup").css("display", "none");
      $x("#d_ftr_lst_prodgroup").css("display", "none");


      $x("#d_ftr_lst_openmonth").css("display", "none");
      $x("#d_ftr_lst_treatment").css("display", "none");
      $x("#d_ftr_lst_yaxis").css("display", "none");
      $x("#d_ftr_lst_custcohort").css("display", "none");
      $x("#d_ftr_lst_transactive").css("display", "none");
      $x("#d_ftr_lst_measures").css("display", "none");
      $x("#d_ftr_lst_measures2").css("display", "none");


   }


   function showDiv(divid) {
      document.getElementById(divid).style.display = 'block';
      if(divid=="div_grid_layer")  {
         $x("#a_gc_toggle").attr("href","javascript:hideDiv('div_grid_layer');showDiv('div_chart_layer');")
         $x("#img_gc_toggle").attr("src","/Cognos_Global/images/view_chart.gif")            
      }
      else if(divid=="div_chart_layer")  {
         $x("#a_gc_toggle").attr("href","javascript:hideDiv('div_chart_layer');showDiv('div_grid_layer');")
         $x("#img_gc_toggle").attr("src","/Cognos_Global/images/view_grid.gif")            
      }
   }
   function hideDiv(divid) {
      document.getElementById(divid).style.display = 'none';
   }


   
</script>

[ittimes]

then for each item, you need to do only two html:

<div id="d_ftr_hdr_com">
abc
</div>


<div id="d_ftr_lst_com">
dddd
</div>


then you can get a dynamic block