Jump to content

Help With Hidden Text Showing On Click.

mehashi

By mehashi,
in HTML/XHTML

 Share

Recommended Posts

mehashi Newbie

mehashi

Posted
Posted

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
Ingolme w3schools Guru

Ingolme

Posted
Posted

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
mehashi Newbie

mehashi

Posted
  • Author
Posted

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
Ingolme w3schools Guru

Ingolme

Posted
Posted

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
mehashi Newbie

mehashi

Posted
  • Author
Posted

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
mehashi Newbie

mehashi

Posted
  • Author
Posted

Thank you very much, that will be the first thing I try! Thanks again! ^_^

Link to comment
Share on other sites
jdog1089 Newbie

jdog1089

Posted
Posted (edited)

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>

Edited by jdog1089
Link to comment
Share on other sites
Ingolme w3schools Guru

Ingolme

Posted
Posted
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
jlhaslip Devoted Member

jlhaslip

Posted
Posted

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
jdog1089 Newbie

jdog1089

Posted
Posted
No, all the script is supposed to do is to display or hide some text when you click on a link
Yea 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
Ingolme w3schools Guru

Ingolme

Posted
Posted
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
mehashi Newbie

mehashi

Posted
  • Author
Posted

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...