JavaScript - Link Preview Show/hide Div,iframe
Hello codingforums,
There are various widgets and plugins that show link preview via tooltip or iframe, So as I am trying to continuously improve web sites experience with new trends and web functionalities - thus it come the task for uniform link preview via div and iframe. This is the script that use attribute id's but for the complete solution it would be required to display link within event 'this' or something -any suggestions and help are very appreciated. Thanks Code: <script type="text/javascript"> function toggleDiv(divid){ var div = document.getElementById(divid); div.style.display = div.style.display == 'block' ? 'none' : 'block'; } </script> <div class="toggle"><a href="javascript:toggleDiv('panel1');" >Toggle Panel 1</a></div> <div id="panel1" class="panel"> <h2>Panel 1</h2> This panel contains text </div> <div class="toggle"><a href="javascript:toggleDiv('panel2');" >Toggle Panel 2</a></div> <div id="panel2" class="panel" style="display:block;"> <h2>Panel 2</h2> This panel contains external url content <iframe src="http://" width="100%" heigth="500"></iframe> </div> <div id="panel1" class="panel"> <h2>Panel 1</h2> This panel starts closed because style='display:none' is defined in the style section of the head </div> <div class="toggle"><a href="javascript:toggleDiv('panel2');" >Toggle Panel 2</a></div> <div id="panel2" class="panel" style="display:block;"> <h2>Panel 1</h2> This panel starts open because of style='display:block' </div> <a href="javascript:toggleDiv('panel1');" >Another Link to Toggle Panel 1</a> [/CODE] Similar TutorialsI'm setting up an application that involves blog posts with comments boxes appended to the div that contains the posts. The comments boxes are in iframes and load an html file on the same domain. There are multiple posts/boxes on each page. I need a javascript that will only run the append script when the posts are written and appear on the page. So in non js language, I'm looking for this: if div id post#5 appears on the page, show the iframe that contains the comments box that goes with post number 5. else don't show it. I don't know enough javascript to figure this out so if anyone could point me in the right direction, I'd be grateful. I can I take a code like this: Code: <script language="javascript"> function toggle() { var ele = document.getElementById("toggleText"); var text = document.getElementById("displayText"); if(ele.style.display == "block") { ele.style.display = "none"; text.innerHTML = "show"; } else { ele.style.display = "block"; text.innerHTML = "hide"; } } </script> <a href="javascript:toggle();" id="displayText">Show/Hide</a> <div id="toggleText" style="display: none;">This is Hidden Text</div> But make it so you see "Show" before you click, then change the text to "Hide" once you click the link? Is there any way to make a link show if javascript is being used to hide it? This is the javascript code that is hiding the link: Code: <a href="javascript:void(0)" class="show-hide-link action-link"> Hi EveryBody, I want to add a preview of html page feature in my project. I had created registration form and I need when user click submit button,user should get a preview of registration form after that further operation will b performed. Guys just tell me how can i achieved this. Any clue or sample code so i can learn it and implement in my project. I don't know a lot about Javascript... still learning.. I am trying to create a show/hide effect that displays an image based on the users text input. I have coded this before for a list/menu and it works fine. With this particular project there are too many selections to choose from to put in a list/menu. I am trying to use if and else if statements to make this work. With the code the way it is only the first function on the list works. I tried just using repeating if statements and only the last function on the list works. Here is the code: Code: <script type="text/javascript" > function showSample() { if (document.getElementById('input').value='SW001') { document.getElementById('SW001').style.display='block'; document.getElementById('SW002').style.display='none'; document.getElementById('SW003').style.display='none'; document.getElementById('SW004').style.display='none'; } else if (document.getElementById('input').value='SW002') { document.getElementById('SW001').style.display='none'; document.getElementById('SW002').style.display='block'; document.getElementById('SW003').style.display='none'; document.getElementById('SW004').style.display='none'; } else if (document.getElementById('input').value='SW003') { document.getElementById('SW001').style.display='none'; document.getElementById('SW002').style.display='none'; document.getElementById('SW003').style.display='block'; document.getElementById('SW004').style.display='none'; } else if (document.getElementById('input').value='SW004') { document.getElementById('SW001').style.display='block'; document.getElementById('SW002').style.display='none'; document.getElementById('SW003').style.display='none'; document.getElementById('SW004').style.display='none'; } else if (document.getElementById('input').value='SW005') { document.getElementById('SW001').style.display='none'; document.getElementById('SW002').style.display='none'; document.getElementById('SW003').style.display='none'; document.getElementById('SW004').style.display='block'; } } </script> <style type="text/css"> <!-- #main { width: 400px; margin-right: auto; margin-left: auto; height: 125px; } #imageArea { float: right; width: 200px; } #formArea { float: left; width: 200px; height: 125px; } .image { height: 125px; width: 125px; margin-right: auto; margin-left: auto; display: none; } #SW001 { background: url(../_images/Colorfil/SW0001.jpg) no-repeat center center; } #SW002 { background: url(../_images/Colorfil/SW0002.jpg) no-repeat center center; } #SW003 { background: url(../_images/Colorfil/SW0003.jpg) no-repeat center center; } #SW004 { background: url(../_images/Colorfil/SW0004.jpg) no-repeat center center; } #SW005 { background: url(../_images/Colorfil/SW0005.jpg) no-repeat center center; } --> </style> </head> <body> <div id="main"> <div id="imageArea"> <div class="image" id="SW001"></div> <div class="image" id="SW002"></div> <div class="image" id="SW003"></div> <div class="image" id="SW004"></div> <div class="image" id="SW005"></div> </div> <div id="formArea"> <form action="" method="get"> <input type='text' name="input" id='input' /> <input name="" type="button" onclick="showSample(this.selectedIndex)"/> </form> </div> </div> </body> </html> Any help would be greatly appreciated! Hi guys, im new to forums and need some help with my website. I have embed a flash player known as: JW player into my website and put it into a div. Now my problem is I want javascript to hide the div containing the flash player for atleast a few seconds to display a loading image.gif. How would I set this up? Im not to familiar about using javascript so im not sure if its even possible. Anways thx for any help ore suggestions related to this subject. Hello, I'm trying to have a div be hidden on loading the page but when you click a link it will show the div... here's code I have but it doesn't show when you click the link... <script type="text/javascript"> function show(){ document.getElementById(test).style.display="block"; } </script> <div id="test" style="display:none;"> <p>Some text</p> </div> <a href="#" onclick="show(); return false;">Show</a> Im pretty new to JS so Im sure this is not the best way to go about this but it'll do for now, any suggestions welcome I have a script to show and hide various divs based on a function & var. The problem im having is that when ANY of the variables ('hate', 'ok' and 'love') are passed all 3 different feedback forms ('FeedbackHate', 'FeedbackOk' and 'FeedbackLove') appear, not just the one I want. here is the JS: Code: function sitesurveyswitch(emotion) { var e = emotion; document.getElementById('site_survey_hate').style.backgroundPosition = '0px 0px'; document.getElementById('site_survey_ok').style.backgroundPosition = '0px 0px'; document.getElementById('site_survey_love').style.backgroundPosition = '0px 0px'; document.getElementById('FeedbackHate').style.display = 'none'; document.getElementById('FeedbackOk').style.display = 'none'; document.getElementById('FeedbackLove').style.display = 'none'; if (e == 'hate') document.getElementById('site_survey_hate').style.backgroundPosition = '-80px 0px'; document.getElementById('FeedbackHate').style.display = 'block'; if (e == 'ok') document.getElementById('site_survey_ok').style.backgroundPosition = '-80px 0px'; document.getElementById('FeedbackOk').style.display = 'block'; if (e == 'love') document.getElementById('site_survey_love').style.backgroundPosition = '-80px 0px'; document.getElementById('FeedbackLove').style.display = 'block'; } and here is the code related to this function: Code: <div id="siteSurveyBox"> <span id="site_survey_hate" onclick="sitesurveyswitch('hate');return false;"></span> <span id="site_survey_ok" onclick="sitesurveyswitch('ok');return false;"></span> <span id="site_survey_love" onclick="sitesurveyswitch('love');return false;"></span> </div> <div id="FeedbackHate" style="display:none; margin-top:-28px;"> FEEDBACK FORM IS HERE </div> <div id="FeedbackOk" style="display:none; margin-top:-28px;"> FEEDBACK FORM IS HERE </div> <div id="FeedbackLove" style="display:none; margin-top:-28px;"> FEEDBACK FORM IS HERE </div> Hi all, Check this code: PHP Code: <a>text</a> <div id="pkg">pkg</div> <div id="table_pkg">table_pkg</div> I'd like to show table_pkg and hide pkg when I click on <a>text</a>. How can I do? Thank you very much this is what im trying to do: http://www.linkstraffic.net/programm...d/movebox.html using this code: http://www.linkstraffic.net/programm...nd/movediv.php heres my code. can someone fix it? html: [CODE] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Chris MacDonald - Javascript Assignment 2</title> <link href="styles/styles.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="java.js"></script> <div id="header"> <div id="logo"><img src="images/beat.png" /></div> </div> <ul id="nav"> <li><a href="#">Home</a></li> <li><a href="http://beatthreads.bigcartel.com/category/tees">Shirts</a></li> <li><a href="#">About Us</a></li> </ul> </head> <body> <div id="content"> <a href="#" onclick="interv=setInterval('ShowBox()',3);return false;">Upcoming Designs</a> <div id="coverlogin"> <div id="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus tristique cursus dui, a venenatis diam consectetur fermentum. Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent aliquam ornare nunc non semper. Morbi blandit lectus non elit ultricies ultricies. Fusce mattis purus et eros ultrices et facilisis nulla consequat. Vestibulum tellus libero, tempor vel tincidunt nec, consectetur non ante. Donec sed malesuada felis. Mauris lorem lorem, ornare a rutrum quis, rutrum in mauris. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. <br/> <p align="left"><a href="#" onClick="interv=setInterval('HideBox()',3);return false;">X</a></p> </div> </div> </div> <div id="footer"> <div id="footertext">Beat Threads - 2010</div> </div> </body> </html> [CODE] javascript: // JavaScript Document var hh=0; var interv; //we show the box by setting the visibility of the element and incrementing the height smoothly function ShowBox() { //Depending on the amount of text, set the maximum height here in pixels if(hh==40) { clearInterval(interv); return; } obj = document.getElementById("coverlogin"); obj.style.visibility = 'visible'; hh+=2; obj.style.height = hh + 'px'; } function HideBox() { obj = document.getElementById("coverlogin"); if(hh==2) { obj.style.visibility = 'hidden'; obj.style.height = '0.1em'; clearInterval(interv); return; } hh-=2; obj.style.height = hh + 'px'; } [CODE] Can someone fix this for me? Hello, I have the folowing code but it seems to be broken between "SM Decision Support" and "Incident and Request Management". Does anyone know how I resolve ?. The idea is when somebody opens the page all the sections are hidden/uncollapsed and the user can collapse individually each section with a click or by hitting the expand/collapse all link. ------------ Have placed code in attachment as too long for this section ok trying to get a Div tag to show if something is True and hide if something is False JS Code: unction eToggle(anctag,darg) { var ele = document.getElementById('Module1'); var ele = document.getElementById('Module2'); var ele = document.getElementById('Module3'); var ele = document.getElementById('Module4'); if("module1" + "module2" + "module3" + "module4" <40) { div.id.Failed = "block"; div.Failed = "Failed"; } else { div.style.Passed = "block"; div.Passed = "show"; } } HTML Code: <div id="Fail" class="hidden" style="display: none"><b><i>You will need to Repeat the Semester!</b> <br /> </div> <div id="Passed" class="hidden" style="display: none"> <img src="faces.png" width="50" height="50"><b><i> "Good Job you passed the Semster!"</b></div> Code: <html> <head> <script type="text/javascript" src="jquery-1.6.1.min.js"></script> <script type="text/javascript"> function showonlyone(thechosenone) { var noticecontent = document.getElementsByTagName("div"); for(var x=1; x < noticecontent.length; x++) { name = noticecontent[x].getAttribute("name"); if (name == 'noticecontent') { if (noticecontent[x].id == thechosenone) { noticecontent[x].style.display = 'block'; } else { noticecontent[x].style.display = 'none'; } } } } </script> </head> <body> <center> <div id="parentdiv"> <div id="expandall">OPEN/CLOSE ALL</div> <div id="noticeheading1" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent1');">Heading 1</div> <div id="noticecontent1" name="noticecontent" class="noticecontent">awertysergyetwhwgertrhztrxdtykpopmift6hwe5awfwedaserhdy4hatefeshdgtrgd</div> <div id="noticeheading2" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent2');">Heading 2</div> <div id="noticecontent2" name="noticecontent" class="noticecontent">fh56serhgzsrxdtrjhgzsrltkjuytinubvre6io4exjhgftxtrokzet6ttawruthrthwru</div> <div id="noticeheading3" class="noticeheading" name="noticeheading"; onClick="showonlyone('noticecontent3');">Heading 3</div> <div id="noticecontent3" name="noticecontent" class="noticecontent">fdfjesrtaw5u4wgy5gw45use4syzerhgtawerfatrastaghgryseerathw5uz4de5ser5s</div> </div> </center> </body> </html> can anyone help on "OPEN/CLOSE ALL" to show or hide all .noticecontent divs I have this iframe code. Code: <iframe width="300" height="180" style="margin-bottom:5px; z-index:-1000;" src="http://www.ichartsonline.com/external/tradeback.aspx" frameborder="0" marginwidth="0" marginheight="0" scrolling="no"></iframe> I have a WP plugin for image lightboxes. When the lightbox pops up, the iframe is overlayed on it. Is there any easy fix for this? Do you need to see the plugin Javascript? Any help will be much appreciated! Thanks I want to be able to hide a DIV within an iframe from the parent document. The usual document.getElementById('element').style.display="none"; doesn't work as I can't point to elements within the iframe with it. What do I need to add to make it look within the iframe and not the parent document? Many thanks in advance. Hey there, I want a div element only to show when you hover over an anchor of the main menu. The problem is: This div is not a child of the menu, so i can't do it through simple hover and display css functions. That's the menu. This is what should appear when you're hovering one of the items. Also, I want a different div for the different menu anchors, because I dont think wordpress can read the category by a hover. And, if this wasn't enough, I have no idea how to build this so you can actually from the menu anchor to the subnav without it disappearing when you're not above the anchor. Here's the website:www.chabuya.net I already tried hundreds of show/hide scripts, solving this via css but nothing works for me. I'd be grateful for any suggestions. Thanks in advance, Kevin hi all, i'm new here. i'm designing websites. here is address where i need little help: http://raftingtara.com/sajt5/ i want to make action: when top sub-menu disappear, that gray background disappear too!!?? anyone can help me with that? i can send all source code if you need? THANKS I have a concatenated list of member names, with corresponding profile pics. I am trying to implement something similar to Facebook, where when you mouseover the picture or member name, another div appears, such as an "x" or "delete link" which lets you click to delete that member. I tried to implement the a show/hide with the following, but this won't work with me since my list is concatenated, and since you can only have one id per div- this method won't cut it. So, how can I make this happen? Non-working Code: Code: HTML <div > <div id="showhide"> Line 1 </div> <div id="visiblediv" style="display: none;"> Line 2 </div> </div> <div > <div id="showhide"> Line 3 </div> <div id="visiblediv" style="display: none;"> Line 4 </div> </div> <div > <div id="showhide"> Line 5 </div> <div id="visiblediv" style="display: none;"> Line 6 </div> </div> Javascript: <script> function mover(){ document.getElementById("visiblediv").style.display="block" } function mout() { document.getElementById("visiblediv").style.display="none" } document.getElementById('showhide').onmouseover=mover; document.getElementById('showhide').onmouseout=mout; </script> CSS: #visiblediv { visibility:visible; border:1px dotted black; } Good afternoon all, I need a bit fo help with unhiding a selection. I have a 10 checkboxes on a form. When the user clicks one of the boxes the rest are hidden and a comments box shows. That works great, the part I can't figure out is how to make all the boxes show again if the user unchecks the checkbox and make the comments box hide again. Here is the code I am using to do the hide: Code: function HideComments() { var a1 = document.getElementById("crmForm_answer1").checked; var a8 = document.getElementById("crmForm_answer8").checked; var a2 = document.getElementById("crmForm_answer2").checked; var a3 = document.getElementById("crmForm_answer3").checked; var a4 = document.getElementById("crmForm_answer4").checked; var a5 = document.getElementById("crmForm_answer5").checked; var a6 = document.getElementById("crmForm_answer6").checked; var a7 = document.getElementById("crmForm_answer7").checked; var a9 = document.getElementById("crmForm_answer9").checked; var a10 = document.getElementById("crmForm_answer10").checked; if(a1==true) { document.getElementById("crmForm_answer1_value").parentNode.parentNode.style.display = 'block'; document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none'; } else document.getElementById("crmForm_answer1_value").parentNode.parentNode.style.display = 'none'; if(a8==true) { document.getElementById("crmForm_answer8_value").parentNode.parentNode.style.display = 'block'; document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none'; } else document.getElementById("crmForm_answer8_value").parentNode.parentNode.style.display = 'none'; if(a2==true) { document.getElementById("crmForm_answer2_value").parentNode.parentNode.style.display = 'block'; document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none'; } else document.getElementById("crmForm_answer2_value").parentNode.parentNode.style.display = 'none'; if(a3==true) { document.getElementById("crmForm_answer3_value").parentNode.parentNode.style.display = 'block'; document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none'; } else document.getElementById("crmForm_answer3_value").parentNode.parentNode.style.display = 'none'; if(a4==true) { document.getElementById("crmForm_answer4_value").parentNode.parentNode.style.display = 'block'; document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none'; } else document.getElementById("crmForm_answer4_value").parentNode.parentNode.style.display = 'none'; if(a5==true) { document.getElementById("crmForm_answer5_value").parentNode.parentNode.style.display = 'block'; document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none'; } else document.getElementById("crmForm_answer5_value").parentNode.parentNode.style.display = 'none'; if(a6==true) { document.getElementById("crmForm_answer6_value").parentNode.parentNode.style.display = 'block'; document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none'; } else document.getElementById("crmForm_answer6_value").parentNode.parentNode.style.display = 'none'; if(a7==true) { document.getElementById("crmForm_answer7_value").parentNode.parentNode.style.display = 'block'; document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none'; } else document.getElementById("crmForm_answer7_value").parentNode.parentNode.style.display = 'none'; if(a9==true) { document.getElementById("crmForm_answer9_value").parentNode.parentNode.style.display = 'block'; document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer10").parentNode.parentNode.style.display = 'none'; } else document.getElementById("crmForm_answer9_value").parentNode.parentNode.style.display = 'none'; if(a10==true) { document.getElementById("crmForm_answer10_value").parentNode.parentNode.style.display = 'block'; document.getElementById("crmForm_answer1").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer8").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer2").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer3").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer4").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer5").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer6").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer7").parentNode.parentNode.style.display = 'none'; document.getElementById("crmForm_answer9").parentNode.parentNode.style.display = 'none'; } else document.getElementById("crmForm_answer10_value").parentNode.parentNode.style.display = 'none'; } Thanks in advance for the help, Sam. hi, here is my Javascript to show and hide my comments div: Code: <script language=javascript type='text/javascript'> function showdiv() { if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById('comments').style.visibility = 'visible'; } else { if (document.layers) { // Netscape 4 document.hideShow.visibility = 'visible'; } else { // IE 4 document.all.hideShow.style.visibility = 'visible'; } } } function hidediv() { if (document.getElementById) { // DOM3 = IE5, NS6 document.getElementById('comments').style.visibility = 'hidden'; } else { if (document.layers) { // Netscape 4 document.hideShow.visibility = 'hidden'; } else { // IE 4 document.all.hideShow.style.visibility = 'hidden'; } } } I would now like to animate the div fading or moving down can someone please help? thanks |