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

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.