JavaScript 和 CSS 样式在我的 "Google Sites" 页面上不起作用？

Question

我有一些链接，一旦点击它就会取消隐藏内容，然后再次点击就会显示所有内容。我在 google 文档上使用，但它不起作用。我也在使用 CSS 。链接显示，但 javascript 和 CSS 不会为我或其他人编译。

function toggle() {
 var ele = document.getElementById("toggleText");
 var text = document.getElementById("displayText");
 if(ele.style.display == "block") {
      ele.style.display = "none";
  text.innerHTML = "Musis List";
   }
 else {
  ele.style.display = "block";
  text.innerHTML = "Musis List &#9660;";
 }
}

#title a:link { color: #38761D; text-decoration: none !important; }
#title a:visited { 
 color: #38761D; text-decoration: none !important; 
}
#title a:hover{ 
 color: #4EA628; 
 background-color:transparent;
 text-decoration: none !important; 
}
#title a:active { 
 color: #4EA628; text-decoration: none !important; 
} 
#title a {
 text-decoration: none !important; 
 display:block;
 border-bottom: 0px solid #38761D;
 font-family: Verdana, sans-serif;
 font-weight: bold;
 font-size: large; 
 line-height: 1.26;
}

<center>
<div id="title" >
<a id="displayText" href="javascript:toggle();">Musis List</a>
</div>
<div id="toggleText" style="display: none">
Here will be a list of music....
</div>

<br />
<br />
<br />

<script language="javascript"> 
function toggle1(id) {
 var ele = document.getElementById("toggleText1");
 var text = document.getElementById("displayText1");
 if(ele.style.display == "block") {
      ele.style.display = "none";
  text.innerHTML = "Video List";
   }
 else {
  ele.style.display = "block";
  text.innerHTML = "Video List &#9660;";
 }
} 
</script>

<div id="title" >
<a id="displayText1" href="javascript:toggle1(1);">Video List</a>
</div>
<div id="toggleText1" style="display: none">Here will be a list of videos....</div>


</center>

如果有人可以提供帮助，请告诉我。我很感激伙伴们。

Answer 1

我找到了一个 link，它对所有步骤都非常有帮助：

http://www.k8oms.net/gadget-editor

看看吧！

最好的，大卫·康德

JavaScript 和 CSS 样式在我的 "Google Sites" 页面上不起作用？

JavaScript and CSS style not working on my "Google Sites" page?

html

javascript

css

google-sites

show-hide