AccessHelp123
Programmer
Hi,
I created a page using enterpise wiki template. I added a Content Editor Web Part to the page and entered a link to an html page that has javascript in it. The javascript is supposed to expand and collapse items associated with a few buttons. The scrip works in an html page correctly. When I open the page in the content editor web part I am only able to click on the buttons. As soon as I click on a button it does what it is supposed to do but right after that it expands all options. If I want to collapse something it wont stay collapsed for more than a second. Below is what the html & javascript looks like. Is there something I am missing? Thanks for you help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META content="text/html; charset=windows-1252" http-equiv=Content-Type>
<STYLE type=text/css>.style4 {
TEXT-ALIGN: left
}
</STYLE>
<SCRIPT type=text/javascript>
var objGroup;
var btnGroup;
var btnObject;
var sumStatus = "false";
function toggleRows(id) {
objGroup = document.getElementsByTagName("tr");
btnObject = document.getElementById("btn_" + id);
btnObject.value = (btnObject.value == '+') ? '-' : '+';
for (var i = 0; i < objGroup.length; i++) {
try {
if (objGroup.attributes["id"].value == id) {
objGroup.style.display = (objGroup.style.display == 'none') ? ' : 'none';
} else if (objGroup.attributes["parent"].value == id && objGroup.style.display == ') {
objGroup.style.display = 'none';
document.getElementById("btn_" + objGroup.attributes["id"].value).value = "+";
}
} catch (e) {}
}
}
function init_page() {
objGroup = document.getElementsByTagName("tr");
btnGroup = document.getElementsByTagName("button");
for (var i = 0; i < objGroup.length; i++) {
try {
if (objGroup.attributes["id"].value != "parent") {
objGroup.style.display = "none";
}
} catch (e) {}
}
for (var i = 0; i < btnGroup.length; i++) {
try {
btnGroup.value = "+";
} catch (e) {}
}
}
function togglewhole() {
objGroup = document.getElementsByTagName("tr");
btnGroup = document.getElementsByTagName("button");
ourBtn = document.getElementById("btn_whole");
var text = ourBtn.value;
var bool = "";
if (text == "+") {
sumStatus = "true";
ourBtn.value = "-";
for (var i = 0; i < objGroup.length; i++) {
try {
if (objGroup.attributes["id"].value != "parent") {
objGroup.style.display = "";
}
} catch (e) {}
}
for (var i = 0; i < btnGroup.length; i++) {
try {
btnGroup.value = "-";
} catch (e) {}
}
} else {
sumStatus = "false";
ourBtn.value = "+";
for (var i = 0; i < objGroup.length; i++) {
try {
if (objGroup.attributes["id"].value != "parent") {
objGroup.style.display = "none";
}
} catch (e) {}
}
for (var i = 0; i < btnGroup.length; i++) {
try {
btnGroup.value = "+";
} catch (e) {}
}
}
}
</SCRIPT>
<META name=GENERATOR content="MSHTML 8.00.7600.16821"></HEAD>
<BODY onload="init_page()">
<TABLE style="WIDTH: 100%" cellSpacing=0>
<TBODY class=style4>
<TR style="DISPLAY: inline" id=parent name="parent">
<TD style="WIDTH: 29px"><BUTTON id=btn_whole
onclick="togglewhole(')">-</BUTTON></TD>
<TD style="DISPLAY: inline" class=style4>Show/Hide all Features</TD></TR>
<TR style="DISPLAY: inline" id=parent name="parent">
<TD style="WIDTH: 29px"><BUTTON id=btn_id
onclick="toggleRows('id')">-</BUTTON></TD>
<TD style="DISPLAY: inline" class=style4> Group1</TD></TR>
<TR style="DISPLAY: inline" id=id name="id">
<TD style="WIDTH: 29px"></TD>
<TD style="DISPLAY: inline"
class=style4>
Group1 - Item1</TD></TR>
<TR style="DISPLAY: inline" id=id name="id">
<TD style="WIDTH: 29px"></TD>
<TD style="DISPLAY: inline"
class=style4> Group1 - Item2</TD></TR>
<TR style="DISPLAY: inline" id=parent name="parent">
<TD style="WIDTH: 29px"><BUTTON id=btn_id1
onclick="toggleRows('id1')">-</BUTTON></TD>
<TD style="DISPLAY: inline" class=style4> Group2</TD></TR>
<TR style="DISPLAY: inline" id=id1 name="id1">
<TD style="WIDTH: 29px"></TD>
<TD style="DISPLAY: inline"
class=style4>
Group2 - Item1</TD></TR>
<TR style="DISPLAY: inline" id=id1 name="id1">
<TD style="WIDTH: 29px"></TD>
<TD style="DISPLAY: inline"
class=style4>
Group2 - Item2</TD></TR>
<TR style="DISPLAY: inline" id=id1 name="id1">
<TD style="WIDTH: 29px"></TD>
<TD style="DISPLAY: inline"
class=style4> Group2 - Item3</TD></TR>
<TR style="DISPLAY: inline" id=parent name="parent">
<TD style="WIDTH: 29px"><BUTTON id=btn_id2
onclick="toggleRows('id2')">-</BUTTON></TD>
<TD style="DISPLAY: inline" class=style4> Group3</TD></TR>
<TR style="DISPLAY: inline" id=id2 name="id2">
<TD style="WIDTH: 29px"></TD>
<TD style="DISPLAY: inline" class=style4> </TD></TR></TBODY></TABLE></BODY></HTML>
I created a page using enterpise wiki template. I added a Content Editor Web Part to the page and entered a link to an html page that has javascript in it. The javascript is supposed to expand and collapse items associated with a few buttons. The scrip works in an html page correctly. When I open the page in the content editor web part I am only able to click on the buttons. As soon as I click on a button it does what it is supposed to do but right after that it expands all options. If I want to collapse something it wont stay collapsed for more than a second. Below is what the html & javascript looks like. Is there something I am missing? Thanks for you help.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD>
<META content="text/html; charset=windows-1252" http-equiv=Content-Type>
<STYLE type=text/css>.style4 {
TEXT-ALIGN: left
}
</STYLE>
<SCRIPT type=text/javascript>
var objGroup;
var btnGroup;
var btnObject;
var sumStatus = "false";
function toggleRows(id) {
objGroup = document.getElementsByTagName("tr");
btnObject = document.getElementById("btn_" + id);
btnObject.value = (btnObject.value == '+') ? '-' : '+';
for (var i = 0; i < objGroup.length; i++) {
try {
if (objGroup.attributes["id"].value == id) {
objGroup.style.display = (objGroup.style.display == 'none') ? ' : 'none';
} else if (objGroup.attributes["parent"].value == id && objGroup.style.display == ') {
objGroup.style.display = 'none';
document.getElementById("btn_" + objGroup.attributes["id"].value).value = "+";
}
} catch (e) {}
}
}
function init_page() {
objGroup = document.getElementsByTagName("tr");
btnGroup = document.getElementsByTagName("button");
for (var i = 0; i < objGroup.length; i++) {
try {
if (objGroup.attributes["id"].value != "parent") {
objGroup.style.display = "none";
}
} catch (e) {}
}
for (var i = 0; i < btnGroup.length; i++) {
try {
btnGroup.value = "+";
} catch (e) {}
}
}
function togglewhole() {
objGroup = document.getElementsByTagName("tr");
btnGroup = document.getElementsByTagName("button");
ourBtn = document.getElementById("btn_whole");
var text = ourBtn.value;
var bool = "";
if (text == "+") {
sumStatus = "true";
ourBtn.value = "-";
for (var i = 0; i < objGroup.length; i++) {
try {
if (objGroup.attributes["id"].value != "parent") {
objGroup.style.display = "";
}
} catch (e) {}
}
for (var i = 0; i < btnGroup.length; i++) {
try {
btnGroup.value = "-";
} catch (e) {}
}
} else {
sumStatus = "false";
ourBtn.value = "+";
for (var i = 0; i < objGroup.length; i++) {
try {
if (objGroup.attributes["id"].value != "parent") {
objGroup.style.display = "none";
}
} catch (e) {}
}
for (var i = 0; i < btnGroup.length; i++) {
try {
btnGroup.value = "+";
} catch (e) {}
}
}
}
</SCRIPT>
<META name=GENERATOR content="MSHTML 8.00.7600.16821"></HEAD>
<BODY onload="init_page()">
<TABLE style="WIDTH: 100%" cellSpacing=0>
<TBODY class=style4>
<TR style="DISPLAY: inline" id=parent name="parent">
<TD style="WIDTH: 29px"><BUTTON id=btn_whole
onclick="togglewhole(')">-</BUTTON></TD>
<TD style="DISPLAY: inline" class=style4>Show/Hide all Features</TD></TR>
<TR style="DISPLAY: inline" id=parent name="parent">
<TD style="WIDTH: 29px"><BUTTON id=btn_id
onclick="toggleRows('id')">-</BUTTON></TD>
<TD style="DISPLAY: inline" class=style4> Group1</TD></TR>
<TR style="DISPLAY: inline" id=id name="id">
<TD style="WIDTH: 29px"></TD>
<TD style="DISPLAY: inline"
class=style4>
Group1 - Item1</TD></TR>
<TR style="DISPLAY: inline" id=id name="id">
<TD style="WIDTH: 29px"></TD>
<TD style="DISPLAY: inline"
class=style4> Group1 - Item2</TD></TR>
<TR style="DISPLAY: inline" id=parent name="parent">
<TD style="WIDTH: 29px"><BUTTON id=btn_id1
onclick="toggleRows('id1')">-</BUTTON></TD>
<TD style="DISPLAY: inline" class=style4> Group2</TD></TR>
<TR style="DISPLAY: inline" id=id1 name="id1">
<TD style="WIDTH: 29px"></TD>
<TD style="DISPLAY: inline"
class=style4>
Group2 - Item1</TD></TR>
<TR style="DISPLAY: inline" id=id1 name="id1">
<TD style="WIDTH: 29px"></TD>
<TD style="DISPLAY: inline"
class=style4>
Group2 - Item2</TD></TR>
<TR style="DISPLAY: inline" id=id1 name="id1">
<TD style="WIDTH: 29px"></TD>
<TD style="DISPLAY: inline"
class=style4> Group2 - Item3</TD></TR>
<TR style="DISPLAY: inline" id=parent name="parent">
<TD style="WIDTH: 29px"><BUTTON id=btn_id2
onclick="toggleRows('id2')">-</BUTTON></TD>
<TD style="DISPLAY: inline" class=style4> Group3</TD></TR>
<TR style="DISPLAY: inline" id=id2 name="id2">
<TD style="WIDTH: 29px"></TD>
<TD style="DISPLAY: inline" class=style4> </TD></TR></TBODY></TABLE></BODY></HTML>
