collapse/hidden/visible

ok, so i am working with a script like this:

Expand|Select|Wrap|Line Numbers

 function addPrinciples(){

  var s = '<div id="PrinciplesContainer" class="Container"><ul>';

  s += '<form id="principles">'

  for (var i in Principles){

    node = Principles[i];

    s+= '<li id='+node.id+'>';

    s+= '<input type="checkbox" style="Container" onClick="getAjaxPrincipleInfo()" '+(node.checked?'checked':'')+' value="principle"'+node.id+'>' +node.title + '</input></li>';    

  }

  s+='</ul></form></div>'

//  alert(s);

  document.getElementById("filterContainer").innerHTML += s;

}
 
function initDisplay(){

  addCategories();

  addPrinciples();

  setDisplay();

}
 
function setDisplay(){

  if (document.getElementById('radioCategories').checked) {

    document.getElementById('SubCategoriesContainer').style.visibility = 'visible';

    document.getElementById('PrinciplesContainer').style.visibility = 'collapse';

  }

  else{

    document.getElementById('SubCategoriesContainer').style.visibility = 'collapse';

    document.getElementById('PrinciplesContainer').style.visibility = 'visible';

  }

}

and my css:

Expand|Select|Wrap|Line Numbers

 .Container {

  position: static;

  padding: 5px 5px 5px 5px;

  background-color:#99CC67;

  border: 1px solid darkgreen;

  overflow: auto;

  width: 208px;
 
}

it ends up giving me a black box where something. say click one thing you get a black box where the other one will be, and vice versa. If anyone knows how to help with this that would be greatly appreciated.

Jul 18 '07 #1

Subscribe Post Reply

4107

gits

5,390

Expert Mod 4TB

hi ...

try display:none; (for visibility:collapse;) and display:'block' (for visibility:collapse) instead ... may be that helps?

kind regards

Jul 18 '07 #2

vinkinator88

well, it gets rid of the black box, but it isn't replacing the first open box with the new open box. Thanks for the help though.

Jul 18 '07 #3

gits

5,390

Expert Mod 4TB

hmmm ... the following example works:

[HTML]<script>
function setDisplay(){
if (document.getElementById('radioCategories').checke d) {
document.getElementById('SubCategoriesContainer'). style.display = 'block';
document.getElementById('PrinciplesContainer').sty le.display = 'none';
}
else{
document.getElementById('SubCategoriesContainer'). style.display = 'none';
document.getElementById('PrinciplesContainer').sty le.display = 'block';
}
}
</script>
<body onload="setDisplay();">
<input type="checkbox" id="radioCategories" checked="true" onclick="setDisplay();">
<div id="SubCategoriesContainer">test</div>
<div id="PrinciplesContainer">test1</div>
</body>
[/HTML]

do you get any errors? javascript or css-ones? try firefox and its js-console ... that should show a lot of error-information ... in case there are some ;)

kind regards

ps: tested it in FF, IE5(Mac) with and without your CSS ... works. may be there's an error with the other js-functions that creates the content ... in case it is not too much code post the entire page here or pm it to me ... i'll have a closer look at it and try to extract the relevant things?

Jul 18 '07 #4

vinkinator88

thanks, greatly appreciated.

Jul 18 '07 #5

Similar topics

Expand/Collapse DIVS

by: James Hurrell | last post by:

Hi, I'm using the following javascript function to expand and collapse portions of text in a web page (targeted at IE5.5 and above): function doExpand(paraNum,arrowNum) { if...

Javascript

What does visibility: collapse really mean (and do)?

by: Jukka K. Korpela | last post by:

I have noticed that the meaning of visibility: collapse has been discussed on different forums, but with no consensus on what it really means. Besides, implementations differ. The specification...

HTML / CSS

seeking explanation for strange 'border-collapse' behavior

by: ireneatngs | last post by:

Hi, I have example html below which contains a couple of hidden divs. However, some of the table borders within these hidden divs are actually displayed when they should not be. In my...

HTML / CSS

Script to collapse a list

by: Alvaro G Vicario | last post by:

I have a list built on HTML and CSS: <ul> <li>Foo</li> <li>Bar <ul> <li>Gee</li> </ul> </li> </ul>

Javascript

CSS: using js to collapse columns in tables

by: Erwin Moller | last post by:

Hi all, Is it possible to collapse certain columns in a rendered table? I have been fiddling around with CSS and visibiliy: collapse, but I cannot get it working in NN6 and IE6 and firefox. ...

Javascript

Hide td borders with border-collapse

by: invinfo | last post by:

I read some NG posts on this and also looked at W3C and others. http://www.w3.org/TR/CSS2/tables.html http://aerie.chirp.com.au/css/bordercollapse/ I could not make border-style: hidden...

HTML / CSS

Expand and Collapse

by: Jenny | last post by:

My codebehind file contains a lot of sub's. Is there a fast way to expand and collapse them in the VisualStudio? It's really exhausting to collapse them all after opening the project in the...

ASP.NET

Expand/Collapse Datagrid

by: sirfunusa | last post by:

Does anyone have sample code for an expanding parent/child datagrid. Like a treeview control with the "+/-" signs. ASP.NET 1.1 thanks Jeff

ASP.NET

How to make DIV tags to expand and collapse

by: Max58kl | last post by:

Hi I am currently trying to create a FAQ webpage. At the moment the code I have lets me click on the Questions which successfully shows and hides the <DIV> tags containing the Answers. But...

Javascript

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General