Javascript handlebar.js和谷歌电子表格显示/隐藏内容

我正试图把我的内容从谷歌电子表格带到车把中，使其成为我可以显示/隐藏的标签。当您单击链接时，它会显示一个内容面板并隐藏另一个内容面板。我有把手，从两个谷歌电子表格中输入内容，但当我添加时，尝试隐藏/显示面板，它不起作用。我有隐藏/显示面板显示在同一时间，但没有内容，从车把在它

这是我的小提琴：

下面是javascript部分：

   function toggle_visibility(id) {
      var e = document.getElementById(id);
        if(e.style.display == 'block')
          e.style.display = 'none';
            else
          e.style.display = 'block';
    }


// Define spreadsheet URL.
   var mySpreadsheet = 'https://docs.google.com/spreadsheet/ccc?key=0AjlSK7_zXoNHdEoyWDYxb3hnZi1xWkl1TVQ0eERBQ2c#gid=0';
   var mySpreadsheet2='https://docs.google.com/spreadsheet/ccc?key=0AjlSK7_zXoNHdEpYUEg0VTJ0Rlpzb2RUOVZfLU5oX0E#gid=0'

// Compile the Handlebars template for HR leaders.
   var HRTemplate = Handlebars.compile($('#hr-template').html());
   var HRTemplate3 = Handlebars.compile($('#hr-template3').html());
// Load top five HR leaders.
    $('#hr').sheetrock({
       url: mySpreadsheet,
       sql: "select A,B,C,N,M,O where B contains 'yes' order by A desc",
       headersOff: true,
       headers: 2,
       rowHandler: HRTemplate
    });
    $('#hr3').sheetrock({
       url: mySpreadsheet2,
       sql: "select A,C,D,E order by A desc",
       headersOff: true,
       headers: 2,
       rowHandler: HRTemplate3
    });

这里是HTML部分：

    <ul>
       <li><a href="#" onclick="toggle_visibility('sec1');">Certificates</a></li>
       <li><a href="#" onclick="toggle_visibility('sec2');">Minors</a></li>
    </ul>
    <div id="sec1" style="background-color:pink;">
         <div id="hr" class="table">
            <script id="hr-template" type="text/x-handlebars-template">
             <div id='table-row'>
                       <div id='first-cell'><a href='{{cells.N}}' class='left-link'>{{cells.A}}</a></div>
               <div id='second-cell'><a href='{{cells.O}}' class='right-link'>{{cells.M}}</a></div>
                </script>
           </div>
     </div>  
     <div id="sec2" style="background-color:#eee;"> 
          <div id="hr3" class="table">
           <script id="hr-template3" type="text/x-handlebars-template">
            <div id='table-row'>
                        <div id='first-cell'><a href='{{cells.D}}' class='left-link'>{{cells.A}}</a></div>
                <div id='second-cell'><a href='{{cells.E}}' class='right-link'>{{cells.C}}</a></div>
                     </div>
               </script>
           </div>
      </div>

Fiddler似乎在加载库时遇到问题，但在本地构建页面时，它工作正常。试试这个zip文件，看看你还有什么问题

---

谢谢您的帮助。看起来他们的div挂在了开关上，一个没有隐藏，另一个出现了。如果我使用position:absolute，那么div就不会随着handlebar的输入而扩展。您需要修改visibility函数以隐藏活动元素，或者您可以编写如下帮助器函数：。然后，您需要让您的锚调用新函数：

很抱歉，花了这么长时间才回到Cristos。我试过了，我感觉越来越笨，但是这个周末我会回来的，这会让你保持联系。