Toggle Display of DIV 2

[CassidyHunt]

I have a list of elements with display on and off options. When the element disappears the rest of the elements won't shift up to replace the void from the previous object.

Is there anyway to fix this?

here is my code

<script language="javascript">
	
	
function toggleDisplay(e){
	alert(e);
element = document.getElementById(e).style;
 if (element.display=='none') {element.display='block';}
 else {element.display='none';}

}
	
</script>

<div id="something2">
<input type="button" value="Click Me" onclick="toggleDisplay('something')">
</div>
<div id="something">
<input type="button" value="Click Me" onclick="toggleDisplay('something2')">
</div>
<div id="something3">
<input type="button" value="Click Me" onclick="toggleDisplay('something3')">
</div>

If you click on middle div button it disappears fine but div3 does not shift up. I actually have around 20 items I would like to do this with and make a clean list everytime.

What is the best approach?

Thanks

Cassidy

 

[LFI]

Does it work for the other buttons?

Did you intend to put something inside of DIV something2 and vice-versa?

What version of what browser are you using?

--Dave

 

[CassidyHunt]

It hides just fine. The problem is what I end up with is like this:

something
something2
something3

Now click the button in something2

something

something3


What I want to end up with is

something
something3

I am thinking what I will have to do is remove all the innerHTML from the div statements and rewrite it with new html to get the effect I want. I think that is horribly inefficient but if I have to I will.

I was wondering if there was something I could set in the javascript or css that would do this automatically.

Thanks

Cassidy

 

[LFI]

The code you wrote does this for me in IE6. What version of what browser are you using?

Post the actual code you are using.

--Dave

 

[CassidyHunt]

I am using IE6 and Mozilla.

here is the actual code:

<div id="CHV009-45" style="display:'block'">
	<table class="item_container">
		<tr>
			<td>CHV009-45</td>
			<td colspan="2">1951 Chevrolet Semi Color Accessory Brochure -  Th</td>
		</tr>
			<td><a href="images/fs/CHV009.jpg"><img src="images/tn/CHV009TN.jpg"></a></td>
			<td>
				<table class="item_details">
					<tr>
						<td colspan="3">1951 Chevrolet Semi Color Accessory Brochure -  The Sparkling New Line Of Genuine Chevrolet Accessories for  51 . Very rare. 30 Pages. Dimensions: 5½  x 9 .Condition: Very Good. Damage: Cover slightly dirty  and one page has a small corner torn off.</td>
					</tr>
						<td>Year:&nbsp;&nbsp;1951</td>
						<td>Make:&nbsp;&nbsp;CHV</td>
						<td>Hue:&nbsp;&nbsp;SEMI</td>
					</tr>
						<td colspan="2">Cateogry:&nbsp;&nbsp;Sales Literature</td>
						<td>Type:&nbsp;&nbsp;Accessory Brochure</td>
					</tr>
				</table>
			</td>
			<td>
				<table class="item_price">
					<tr>
						<td>Check Mark</td>
					</tr>
					<tr>
						<td>Price:&nbsp;&nbsp;35</td>
					</tr>
					<tr>
						<td><input type="button" value="Add To Cart" onclick="toggleDisplay('CHV009-45')"></td>
					</tr>
				</table>
			</td>
		</tr>
	</table>		
</div>
<br>
<br>

<div id="MER008-112" style="display:'block'">
	<table class="item_container">
		<tr>
			<td>MER008-112</td>
			<td colspan="2">1952 Mercury Semi Color Accessory Brochure -  Acce</td>
		</tr>
			<td><a href="images/fs/MER008.jpg"><img src="images/tn/MER008TN.jpg"></a></td>
			<td>
				<table class="item_details">
					<tr>
						<td colspan="3">1952 Mercury Semi Color Accessory Brochure -  Accessories…. Styled in particular for your 1952 Mercury . Good for reference. 33 Pages. Dimensions: 3  x 8 .Condition: Good. Damage: Slight water damage  but no pages are stuck. The top corner of the back page is partly missing.</td>
					</tr>
						<td>Year:&nbsp;&nbsp;1952</td>
						<td>Make:&nbsp;&nbsp;MER</td>
						<td>Hue:&nbsp;&nbsp;SEMI</td>
					</tr>
						<td colspan="2">Cateogry:&nbsp;&nbsp;Sales Literature</td>
						<td>Type:&nbsp;&nbsp;Accessory Brochure</td>
					</tr>
				</table>
			</td>
			<td>
				<table class="item_price">
					<tr>
						<td>Check Mark</td>
					</tr>
					<tr>
						<td>Price:&nbsp;&nbsp;15</td>
					</tr>
					<tr>
						<td><input type="button" value="Add To Cart" onclick="toggleDisplay('MER008-112')"></td>
					</tr>
				</table>
			</td>
		</tr>
	</table>		
</div>
<br>
<br>

<div id="OLD005-131" style="display:'block'">
	<table class="item_container">
		<tr>
			<td>OLD005-131</td>
			<td colspan="2">1950 Oldsmobile Semi Color Accessory Brochure -  F</td>
		</tr>
			<td><a href="images/fs/OLD005.jpg"><img src="images/tn/OLD005TN.jpg"></a></td>
			<td>
				<table class="item_details">
					<tr>
						<td colspan="3">1950 Oldsmobile Semi Color Accessory Brochure -  Futuramic Oldsmobile Accessories for 1950 . An unusual piece. 41 Pages. Dimensions: 5  x 7 .Condition: Good. Damage: Some slight smudging on some pages and on the back cover.</td>
					</tr>
						<td>Year:&nbsp;&nbsp;1950</td>
						<td>Make:&nbsp;&nbsp;OLD</td>
						<td>Hue:&nbsp;&nbsp;SEMI</td>
					</tr>
						<td colspan="2">Cateogry:&nbsp;&nbsp;Sales Literature</td>
						<td>Type:&nbsp;&nbsp;Accessory Brochure</td>
					</tr>
				</table>
			</td>
			<td>
				<table class="item_price">
					<tr>
						<td>Check Mark</td>
					</tr>
					<tr>
						<td>Price:&nbsp;&nbsp;65</td>
					</tr>
					<tr>
						<td><input type="button" value="Add To Cart" onclick="toggleDisplay('OLD005-131')"></td>
					</tr>
				</table>
			</td>
		</tr>
	</table>		
</div>

The Javascript is the above code.

Thanks

 

[g2000]

Did you try the inline instead of block?

 

[LFI]

It seems to be working fine for me in IE6. What might be confusing you is the two <br>'s you put between each DIV. I think that DIV forces a hard-return also, so you have the equivalent of three hard returns between each DIV. When you make the middle DIV disappear, there are still 5 hard-returns between the remaining DIV's.

Is your lower DIV not moving up at ALL? If it's not just a function of those hard-returns, then I'm out of ideas.

'hope this helps.

--Dave

 

[kaht]

If Dave's theory is correct then you may want to use CSS to space the divs apart instead of <br>'s. CSS would allow you to specifically define how much space you want between the divs instead of just taking whatever space <br> gives you:

<div id="CHV009-45" style="margin-bottom:10px">

On a side note, when defining display styles, you do not need the single quotes (') around block. Additionally, divs are block level elements by nature so unless you have explicitly declared them as inline in the <head> of the page, the display:block is not needed.

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.

 

[CassidyHunt]

That works. It was the hard returns. Thanks everyone.

 

[LFI]

As a slight alternative, you can put the <br> separators INSIDE of the DIV's, just before the </DIV> tag. This way, the space-between disappears when the DIV disappears.

--Dave