Dysan Posted December 30, 2007 Share Posted December 30, 2007 Hi, Using JavaScript, how do you show and hide a div, using two separate functions? <script> </script> Quote Link to comment Share on other sites More sharing options...
phpQuestioner Posted December 30, 2007 Share Posted December 30, 2007 dude - are you serious look at the answer I had already provided you to this question. http://www.phpfreaks.com/forums/index.php/topic,174663.msg773231.html#msg773231 do not double post - either Quote Link to comment Share on other sites More sharing options...
chronister Posted January 3, 2008 Share Posted January 3, 2008 Since you have been given the code and are still having trouble, check out www.sampsonvideos.com. I just discovered this recently. There is a tutorial on doing this exact thing. It uses one function to toggle between hidden and not, but it will show you how and why it works. You can only go so long with using other peoples code before you have to learn yourself. That is where I am at right now. I can code PHP fairly well, but I cannot code javascript to save my life. But I am trying to learn little by little now. Quote Link to comment Share on other sites More sharing options...
emehrkay Posted January 4, 2008 Share Posted January 4, 2008 Since you have been given the code and are still having trouble, check out www.sampsonvideos.com. I just discovered this recently. There is a tutorial on doing this exact thing. It uses one function to toggle between hidden and not, but it will show you how and why it works. You can only go so long with using other peoples code before you have to learn yourself. That is where I am at right now. I can code PHP fairly well, but I cannot code javascript to save my life. But I am trying to learn little by little now. what editor is that guy using? http://www.sampsonvideos.com/videos/JavaScript/Accordion/ i dont like his accordion code btw Quote Link to comment Share on other sites More sharing options...
emehrkay Posted January 4, 2008 Share Posted January 4, 2008 Nevermind, it is a MS product. That guy is a MS fanboy lol, he even uses IE Quote Link to comment Share on other sites More sharing options...
chronister Posted January 4, 2008 Share Posted January 4, 2008 In some of the vids he uses MS visual studio.... and others he uses dreamweaver.... He uses Firefox and IE both. What don't you like about the accordian script? In Javascript I am soooo new to it that I am not at a point of making judgements in coding styles and such, so I ask more for information than anything Quote Link to comment Share on other sites More sharing options...
emehrkay Posted January 4, 2008 Share Posted January 4, 2008 In some of the vids he uses MS visual studio.... and others he uses dreamweaver.... He uses Firefox and IE both. What don't you like about the accordian script? In Javascript I am soooo new to it that I am not at a point of making judgements in coding styles and such, so I ask more for information than anything I didnt particularly like the reliance on the element's children for selectors. The way he nested the elements didnt allow for much flexibility. What if i wanted to change it to a <dl><dt><dd> setup instead of nested divs? If he were to give the handlers a certain hook (classname, rel, title, whatever) and select the elements by the hook, it doesnt really matter what the element is and possibly the layout of them. and he uses inline js, kinda ehhh. ill write up how id do it Quote Link to comment Share on other sites More sharing options...
emehrkay Posted January 4, 2008 Share Posted January 4, 2008 my bad forgot about this. here is my implementation with dt dd. I used a sibling relationship as well in the interest of time. I wrapped my code in an object so that it is a taste cleaner, but it functions the exact same way. I havent tested it across browser though. Id say study my example before the one on that site <html> <head> <title>EmEhRKay's Accordion</title> <style type="text/css"> #acc dt{ background: red; cursor: pointer; } #acc dt:hover{ background: blue; color: #fff; } #acc dd{ display: none; } </style> <script type="text/javascript"> var acc = { start: function(default_open){ acc.handles = document.getElementById('acc').getElementsByTagName('dt'); acc.h_len = acc.handles.length; if(default_open){ var handle = acc.handles[default_open]; acc.showCell(handle); } for(var x = 0; x < acc.h_len; x++){ acc.handles[x].onclick = function(){ acc.hideCells().showCell(this); }; } return acc; }, getSibling: function(start){ var sib = start.nextSibling; while(sib.nodeType != 1){ sib = sib.nextSibling; } return sib; }, showCell: function(handle){ acc.getSibling(handle).style.display = 'block'; return acc; }, hideCells: function(){ for(var x = 0; x < acc.h_len; x++){ acc.getSibling(acc.handles[x]).style.display = 'none'; } return acc; } }; onload = function(){ acc.start(2); }; </script> </head> <body> <dl id="acc"> <dt>One</dt> <dd>one one oneone one oneone one oneone one oneone one oneone one oneone one oneone one oneone one oneone one one</dd> <dt>Two</dt> <dd>two two two two two two two two two two two two two two two two two two two two two two two two two two two two two two </dd> <dt>Three</dt> <dd>three three three three three three three three three three three three three three three three three three three three three </dd> <dt>four</dt> <dd>four four four four four four four four four four four four four four four four four four four four four four four four four </dd> </dl> </body> </html> Quote Link to comment 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.