mehashi Posted May 28, 2009 Share Posted May 28, 2009 Hey guys! I have learnt much from this forum and thought it was about time to join! Please be kind to me I am new to coding!I would like to display several key points on a page, when the point is clicked on it shows a relevant chunk of text underneath. The reader can then either close it by clicking again or move on to next subject.eg this:UpDownLeft...could be viewed like this when clicked on "up":Up up is a direction.... bla bla blaDownLeft...I am sorry if that is awkward to understand, I have seen this used on sites before, but I do not know what the feature is called to be able to learn it! Any help would be greatly appreciated! I know how to write the data, just need to know how to hide it unless clicked, or display upon click, either way! Thank you guys!^_^b Link to comment Share on other sites More sharing options...
Ingolme Posted May 28, 2009 Share Posted May 28, 2009 It looks like the best element for the task would be a definition list. In the code I'm giving you, I'm using the class attribute to reference the correct element within the list. I like to append events with Javascript rather than using HTML attributes. I have a script right below the list so that it hides the elements as soon as they load, as opposed to after the whole page has loaded.This would go in the body: <dl id="directions"> <dt class="up"><a href="java script:return false;">Up</a></dt> <dd class="up">Up is a vector with origin in the center of the Earth.</dd> <dt class="down"><a href="java script:return false;">Down</a></dt> <dd class="down">Down is a vector with an origin in any point of space and a direction towards the center of the Earth.</dd> <dt><a href="java script:return false;">Left</a></dt> <dd class="left">In standard cartesian coorinates, left is a vector with an origin on zero and a sense towards negative numbers along the X axis.</dd> <dt><a href="java script:return false;">Right</a></dt> <dd class="left">In standard cartesian coorinates, right is a vector with an origin on zero and a sense towards positive numbers along the X axis.</dd></dl><script type="text/javascript"> // Hide the elements with Javascript so that they're visible when Javascript is disabled var directions = document.getElementById("directions"); for(var i=0;i<directions.getElementsByTagName("dd").length;i++) { directions.getElementsByTagName("dd")[i].style.display = "none"; }</script> This would go in the <head>: // This is the function that handles the visibility togglingfunction toggle(e) { // Detect the event object e = e?e:window.event; // Detect the element that called the event var link = e.srcElement?e.srcElement:e.target; // Get the <dd> element we're referring to dir = link.parentNode.className; var x = directions.document.getElementsByTagName("dd"); var j = 0; var node = x[0]; // Give the node a default value in case the loop somehow doesn't find an element while (j < x.length) { if(x[j].className == dir) { node = x[j]; } } // Change the style of the selected node node.style.display = (node.style.display == "block")?"none":"block";}// Add events to the linkswindow.onload = function() { var links = directions.getElementsByTagName("a"); for(i = 0; i < links.length;i++) { links.onclick = toggle; }} Link to comment Share on other sites More sharing options...
mehashi Posted May 28, 2009 Author Share Posted May 28, 2009 Wow thank you Ingolme-san! I must admit as it is not basic html it looks a little intimidating to me but I am not afraid to get stuck in and give it a go! I will try this code out tonight and see how it goes, I am fairly sure my host allows java-scripting on pages. Thank you very much for such a helpful reply and clear to understand too! ^_^Lol and very relevant example context to mine! ^_^b Link to comment Share on other sites More sharing options...
Ingolme Posted May 28, 2009 Share Posted May 28, 2009 Since Javascript is a client-side technology, it doesn't matter where you host it. Javascript working or not depends on the browser that's being used to view the site. Link to comment Share on other sites More sharing options...
mehashi Posted May 29, 2009 Author Share Posted May 29, 2009 Ok I am going to do a little reading up on javascript tonight as I don't know how to find the problem, but I am getting 404's when I try to click on the text >.< Thank you anyway for giving me a starting point! I will continue my research and see what I can do! Link to comment Share on other sites More sharing options...
Ingolme Posted May 29, 2009 Share Posted May 29, 2009 Remove the spaces between "java" and "script". This forum puts the spaces as some kind of "protection". Link to comment Share on other sites More sharing options...
mehashi Posted May 29, 2009 Author Share Posted May 29, 2009 Thank you very much, that will be the first thing I try! Thanks again! Link to comment Share on other sites More sharing options...
jdog1089 Posted May 31, 2009 Share Posted May 31, 2009 Sorry I was poking around see I can find some thing interesting. I tried your code Ingolme, but its not doing anything. So when you click on it, its suppose to move in the direction of it class. Its been awhile seend I did something with coding, so am I forgetting something I needed? <html><head><title>test</title><script type="text/javascript">// This is the function that handles the visibility togglingfunction toggle(e) { // Detect the event object e = e?e:window.event; // Detect the element that called the event var link = e.srcElement?e.srcElement:e.target; // Get the <dd> element we're referring to dir = link.parentNode.className; var x = directions.document.getElementsByTagName("dd"); var j = 0; var node = x[0]; // Give the node a default value in case the loop somehow doesn't find an element while (j < x.length) { if(x[j].className == dir) { node = x[j]; } } // Change the style of the selected node node.style.display = (node.style.display == "block")?"none":"block";}// Add events to the linkswindow.onload = function() { var links = directions.getElementsByTagName("a"); for(i = 0; i < links.length;i++) { links.onclick = toggle; }}</script></head><body><dl id="directions"> <dt class="up"><a href="java script:return false;">Up</a></dt> <dd class="up">Up is a vector with origin in the center of the Earth.</dd> <dt class="down"><a href="java script:return false;">Down</a></dt> <dd class="down">Down is a vector with an origin in any point of space and a direction towards the center of the Earth.</dd> <dt><a href="java script:return false;">Left</a></dt> <dd class="left">In standard cartesian coorinates, left is a vector with an origin on zero and a sense towards negative numbers along the X axis.</dd> <dt><a href="java script:return false;">Right</a></dt> <dd class="left">In standard cartesian coorinates, right is a vector with an origin on zero and a sense towards positive numbers along the X axis.</dd></dl><script type="text/javascript"> // Hide the elements with Javascript so that they're visible when Javascript is disabled var directions = document.getElementById("directions"); for(var i=0;i<directions.getElementsByTagName("dd").length;i++) { directions.getElementsByTagName("dd")[i].style.display = "none"; }</script></body></html> Link to comment Share on other sites More sharing options...
Ingolme Posted May 31, 2009 Share Posted May 31, 2009 Sorry I was poking around see I can find some thing interesting. I tried your code Ingolme, but its not doing anything. So when you click on it, its suppose to move in the direction of it class. Its been awhile seend I did something with coding, so am I forgetting something I needed?No, all the script is supposed to do is to display or hide some text when you click on a link Link to comment Share on other sites More sharing options...
jlhaslip Posted May 31, 2009 Share Posted May 31, 2009 No need for javascript, which a user can turn off.CSS can do this just fine.Create an anchor tag with a span inside of it, and toggle the visibility based on the active or focus pseudo-state. <a href="#"><em>CLICK</em> here to make the middle column the longest<span><br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br />this is the middle column<br /></span></a>#container a span {display:none;}#container a:active, #container a:focus {color:#fff; text-decoration:none; background:transparent; cursor:default;}#container a:active span, #container a:focus span {display:inline; left:0;} IE might need display: inline-block to perform properly. Link to comment Share on other sites More sharing options...
jdog1089 Posted May 31, 2009 Share Posted May 31, 2009 No, all the script is supposed to do is to display or hide some text when you click on a linkYea I knew that, but it wasn't working. Is there something I did wrong to make it not work? Link to comment Share on other sites More sharing options...
Ingolme Posted May 31, 2009 Share Posted May 31, 2009 Yea I knew that, but it wasn't working. Is there something I did wrong to make it not work?The forum automatically places a space between "java" and "script:" in javascript:. If you haven't removed the space in the links then it won't work. Link to comment Share on other sites More sharing options...
mehashi Posted June 1, 2009 Author Share Posted June 1, 2009 Hey guys! ^_^Thank you for the help Ingolme I would have never known where to start if it wasnt for your pointers. I am sorry to say that I also had some issues with this code, even after reading up on javascript and trying out a few solutions I was still baffled! Sorry I do not know javascript really!In the end I found a suitable working code on these forums. I just didnt know what to look for before. It is in the "SHOW/HIDE SCRIPT" section of this page (javascript >> code snippets).This works perfectly for me, hopefully for anyone else too! Thanks again for your pointers in the right direction!^_^b Link to comment Share on other sites More sharing options...
roondog Posted June 1, 2009 Share Posted June 1, 2009 I would recommend the jquery accordian lots of tutorials to google for. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.