Collapse an Element

[TheFilmGod]

I'm trying to make an element on my site where a visitor can click close and it collapses completely, and all the content on the page is shifted upwards with everything. So its pretty much taken out. How do I make this happen without refreshing the page. A good example is gamespot.com . Their ad. is collapsable.

 

Thanks in advance!

[Corona4456]

You'll have to use Javascript for that.

[ToonMariner]

http://www.dustindiaz.com/dhtml-expand-and-collapse-div-menu/

[Cathering_]

I use this code

Javascript code:

function switchMenu(obj,objtext) {
var el = document.getElementById(obj);
if ( el.style.display != 'none' ) {
el.style.display = 'none';
document.getElementById(objtext).innerHTML="+";
}
else {
el.style.display = '';
document.getElementById(objtext).innerHTML="-";
}
}

 

HTML Code:

<div onclick="switchMenu('crush1','crushtext1')" class="label">Movies <span id="crushtext1"><script type="text/javascript"><!--
																   document.write("-");
																   --></script></span></div>

	<ul class="block" id="crush1">
		<li><a href="http://movies.freemoviesonline.eu/actionandthriller.php" onmouseover="window.status='Action & Thriller - '+this.title;return true;" onmouseout="window.status='';return true;" title="Watch the old good guy versus bad guy Hollywood action films!">Action & Thriller - <?php echo $action; ?></a></li>
		<li><a href="http://movies.freemoviesonline.eu/childrenandcartoon.php" onmouseover="window.status='Children & Cartoon - '+this.title;return true;" onmouseout="window.status='';return true;" title="Great childrens movies for all ages.">Children & Cartoon - <?php echo $children; ?></a></li>
		<li><a href="http://movies.freemoviesonline.eu/comedyandfunny.php" onmouseover="window.status='Comedy & Funny - '+this.title;return true;" onmouseout="window.status='';return true;" title="Kill your self with endless laughter with are comedy and funny films!">Comedy & Funny - <?php echo $comedy; ?></a></li>
		<li><a href="http://movies.freemoviesonline.eu/drama.php" onmouseover="window.status='Drama - '+this.title;return true;" onmouseout="window.status='';return true;" title="Great and heart brakeing movies go on! feel what the actor feels!">Drama - <?php echo $drama; ?></a></li>
		<li><a href="http://movies.freemoviesonline.eu/fantasyandmyth.php" onmouseover="window.status='Fantasy & Myth - '+this.title;return true;" onmouseout="window.status='';return true;" title="From dragons to Harry Potter let your imagination run wild!">Fantasy & Myth - <?php echo $fantasy; ?></a></li>
		<li><a href="http://movies.freemoviesonline.eu/horrorandscary.php" onmouseover="window.status='Horror & Scary - '+this.title;return true;" onmouseout="window.status='';return true;" title="We will have you hiding behind your sofa!">Horror & Scary - <?php echo $horror; ?></a></li>
		<li><a href="http://movies.freemoviesonline.eu/romanceandlove.php" onmouseover="window.status='Romance & Love - '+this.title;return true;" onmouseout="window.status='';return true;" title="Immerse your self in romance and red Roman candles!">Romance & Love - <?php echo $love; ?></a></li>
		<li><a href="http://www.freemoviesonline.eu/submitmovie.php" onmouseover="window.status='Submit A Movie - '+this.title;return true;" onmouseout="window.status='';return true;" title="You can help us alot by submiting a movie!">Submit A Movie</a></li>

 

Example: http://www.freemoviesonline.eu

[Azu]

Just use the CSS "focus" pseudo-class. No need for any java or anything like that

[ToonMariner]

not all browsers support the :focus pseudo class...

 

Javascript is the tool for this job as it is truely a document effect.

[Azu]

CSS works on all new browsers, and is even supported by some screen readers and stuff, where as javascript is only supported by a few, and is often disabled since usually it's just used for annoying the user (making popups and stuff).

[ToonMariner]

not all css works on all browsers!!!

 

ie6 only supports :hover on the a tag! So in this situation the method that should be adopted to provide the desired DOCUMENT EFFECT is to use javascript.

 

Javascript should initially collapse all elements that you want to hide and then toggel their display on click. That way clients with js off / not supported will simple show all the elments. Only when javascript is available will the toggle be available.

 

CSS IS NOT THE ANSWER IN THIS CASE!!!!

[Azu]

IE doesn't count it's not standards compliant.

[ToonMariner]

Fire fox is not fully standards compliant - even AMAYA is not fully standards compliant...

 

Please Azu - don't post things that are either plain wrong or don't actually have any bearing on the solution to the problem.

[Azu]

You don't need to try to insult my intelligence just because I have a different opinion then you.

[ToonMariner]

That is very true.

 

But in that case please don't post your 'opinion' as fact when it isn't - its not fair on those people who want to learn being sent down the wrong path...

[Azu]

Okay I'm sorry.

 

I never claimed that my opinions were 100% true solid facts though. Always try for yourself to confirm something