TheFilmGod Posted June 21, 2007 Share Posted June 21, 2007 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! Quote Link to comment https://forums.phpfreaks.com/topic/56493-collapse-an-element/ Share on other sites More sharing options...
Corona4456 Posted June 21, 2007 Share Posted June 21, 2007 You'll have to use Javascript for that. Quote Link to comment https://forums.phpfreaks.com/topic/56493-collapse-an-element/#findComment-279060 Share on other sites More sharing options...
ToonMariner Posted June 21, 2007 Share Posted June 21, 2007 http://www.dustindiaz.com/dhtml-expand-and-collapse-div-menu/ Quote Link to comment https://forums.phpfreaks.com/topic/56493-collapse-an-element/#findComment-279183 Share on other sites More sharing options...
Cathering_ Posted July 6, 2007 Share Posted July 6, 2007 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 Quote Link to comment https://forums.phpfreaks.com/topic/56493-collapse-an-element/#findComment-291602 Share on other sites More sharing options...
Azu Posted July 12, 2007 Share Posted July 12, 2007 Just use the CSS "focus" pseudo-class. No need for any java or anything like that Quote Link to comment https://forums.phpfreaks.com/topic/56493-collapse-an-element/#findComment-296360 Share on other sites More sharing options...
ToonMariner Posted July 13, 2007 Share Posted July 13, 2007 not all browsers support the :focus pseudo class... Javascript is the tool for this job as it is truely a document effect. Quote Link to comment https://forums.phpfreaks.com/topic/56493-collapse-an-element/#findComment-296864 Share on other sites More sharing options...
Azu Posted July 13, 2007 Share Posted July 13, 2007 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). Quote Link to comment https://forums.phpfreaks.com/topic/56493-collapse-an-element/#findComment-297270 Share on other sites More sharing options...
ToonMariner Posted July 13, 2007 Share Posted July 13, 2007 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!!!! Quote Link to comment https://forums.phpfreaks.com/topic/56493-collapse-an-element/#findComment-297281 Share on other sites More sharing options...
Azu Posted July 16, 2007 Share Posted July 16, 2007 IE doesn't count it's not standards compliant. Quote Link to comment https://forums.phpfreaks.com/topic/56493-collapse-an-element/#findComment-299572 Share on other sites More sharing options...
ToonMariner Posted July 16, 2007 Share Posted July 16, 2007 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. Quote Link to comment https://forums.phpfreaks.com/topic/56493-collapse-an-element/#findComment-299593 Share on other sites More sharing options...
Azu Posted July 18, 2007 Share Posted July 18, 2007 You don't need to try to insult my intelligence just because I have a different opinion then you. Quote Link to comment https://forums.phpfreaks.com/topic/56493-collapse-an-element/#findComment-300956 Share on other sites More sharing options...
ToonMariner Posted July 18, 2007 Share Posted July 18, 2007 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... Quote Link to comment https://forums.phpfreaks.com/topic/56493-collapse-an-element/#findComment-301011 Share on other sites More sharing options...
Azu Posted July 19, 2007 Share Posted July 19, 2007 Okay I'm sorry. I never claimed that my opinions were 100% true solid facts though. Always try for yourself to confirm something Quote Link to comment https://forums.phpfreaks.com/topic/56493-collapse-an-element/#findComment-302068 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.