Jump to content

Collapse an Element


TheFilmGod

Recommended Posts

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!

Link to comment
Share on other sites

  • 3 weeks later...

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

Link to comment
Share on other sites

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).

Link to comment
Share on other sites

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!!!!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.