Maintaining position for elements under a display:hidden DIV

Hello and thanks in advanced to anyone trying to help!

I'm trying to achieve something similar to popurls.com where they have several articles displayed and then a "More" button exposes several other articles there were hidden.

Once you hover over the elements you have a tool tip located in relative to the item your hovering.

The problem i'm experiencing is with hovering over items which were previously (before clicking "More") display:hidden and therefore did not get a normal position at the time the page was initially displayed.

When i hover over the items that were previously hidden they appear in the top corner of the page instead of next to the hovered item.

My code looks something like this (i've simplified it so i don't bore you too much):

<div>
<a href="#">item #1</a>
<span>this text is displayed when hovering over item #1</span>

<a href="#">item #2</a>
<span>this text is displayed when hovering over item #2</span>

<a href="#">item #3</a>
<span>this text is displayed when hovering over item #3</span>

<button onlick="display('more_hidden_items')">show more</button>

<div id="more_hidden_items">
<a href="#">item #4</a>
<span>this text is displayed when hovering over item #4</span>

<a href="#">item #5</a>
<span>this text is displayed when hovering over item #5</span>

<a href="#">item #6</a>
<span>this text is displayed when hovering over item #6</span>
</div>
<div>

the "more_hidden_items" DIV is initially "display:hidden", once the user clicks the "Show more" button, the "more_hidden_items" DIV is turned into "display:block".

the style of the spans is "position:absolute" , "z-index:1000" and "top:-1000" / "left:-1000"

Thanks,
Guy.

 

the property display does not accept a value called "hidden". you can use -- display: none -- instead

and http://popurls.com/ does not require using -- position: absolute --. i mean handling AP Elements can be more taxing than otherwise.
the same effect can be simulated using a regular div with -- display: none --. and some button can be assigned the behaviour to show / hide

refer http://api.jquery.com/show/
and you may also be interested in http://api.jquery.com/toggle/

 

Yeah, i meant "display:none", in any case, it didn't solve my issue... I'm starting to lose it

 

well it worked for me...

try this

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
	// your variables here
	buttonId = "myButton";
	buttonToggleText = ['show more', 'show less'];
	showHideId = "more_hidden_items";
	
	
	// start using jQuery
	jQuery.noConflict();
	
	jQuery( function($) {
		$("#" + buttonId).click( function() {
				$("#" + showHideId).toggle();
				})
			.text( buttonToggleText[0] )
			.toggle(
				function() {
					$(this).text(buttonToggleText[1]);
					},
				function() {
					$(this).text(buttonToggleText[0]);
					}
				);
		});
</script>
<div>
<a href="#">item #1</a>
<span>this text is displayed when hovering over item #1</span>

<a href="#">item #2</a>
<span>this text is displayed when hovering over item #2</span>

<a href="#">item #3</a>
<span>this text is displayed when hovering over item #3</span>

<button id="myButton">whatever you write here does not matter</button>
<div id="more_hidden_items" style="display: none">
<a href="#">item #4</a>
<span>this text is displayed when hovering over item #4</span>

<a href="#">item #5</a>
<span>this text is displayed when hovering over item #5</span>

<a href="#">item #6</a>
<span>this text is displayed when hovering over item #6</span>
</div>
<div>

HTML:

ps:
1. i used jquery library and inserted it directly from their website.. i recommend you to download it to your site and link before production, in case you want faster loading of your page.
2. use the script inside of the head node in your html.

 

Thanks bvraghav,

The script you supplied only toggles the display of "more_hidden_items", I've attached an image which I hope will describe my problem in a better way.

 

okay... it seems that there is a minor css correction that has to be done for your tooltip element.
probably, it is absolutely positioned wrt something other than your requirement.

the css correction may be required to be done via the js, cant be specific with the given information.

anyways to proceed further, we would require the link to your web page...