ansaurus

Question

How do I display field when I click on a link? (javascript)

Answer 1

A:

Look into onclick events.

xyld 2010-05-07 00:17:26

Answer 2

A:

I would look into jquery, it makes javascript much easier. Using jquery you could perform that using one line of code such as:

$('.<link class>').click(function(){$('.<list class>').show()});

derek 2010-05-07 00:32:50

Answer 3

A:

You can do it this way, but it's pretty crude:

<a href="" onclick="document.getElementById('something').style.display='inherit';return false" >###</a>
<input style="display:none" type="text" id="something"  />

That's the "hard way", but understanding how it works is important.

It is worth it to use a JavaScript framework. Jquery is the most popular and it can seriously make doing any UI work WAY easier.

You can shorten that onclick to:

$('#something').show()

Diodeus 2010-05-07 00:40:06

Answer 4

+1 A:

The basic approach is to toggle the CSS display with Javascript. This is the break down of the below code:

Attach an event to the links when the page loads. This is what the window.onload part does.
Identify the links and box with document.getElementById
Use an anonymous function to capture the display toggle

Toggle the display with style.display.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;  
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Onclick Example</title>
<script type="text/javascript">
  window.onload = function(){
  var link =  document.getElementById('rulink');
  var box  =   document.getElementById('box');
  var close = document.getElementById('close');  
  link.onclick = function(){
      box.style.display = 'block'
    }  
    close.onclick = function(){
      box.style.display = 'none';
     }
   }
 </script>
 <style>
 div{  
   display:none;  
   background:#f00;  
   width:100px;  
 }
 </style>
 </head>
 <body>
   <a href="javascript:void(0)" id="rulink">report user</a>
   <div id="box">
   <ul>
     <li>abc</li>
     <li>def</li>
   </ul>
   <a href="javascript:void(0)" id="close">Close</a>
 </div>
 </body>

Christopher Altman 2010-05-07 00:43:24

Is there an easy way to copy-paste or export from TextMate into the Stackoverflow Markdown Field? Formatting is rough.

Christopher Altman 2010-05-07 00:55:26

@Christopher: I've never had problems doing it this way: soft tabs (4 spaces) then copy then paste then click the 'code' button in SO. When taking only part of some code that's already indented... I do an intermediate step in a new document. Could use some bundle love!

Agos 2010-05-07 10:03:51

Answer 5

A:

<script>
document.getElementById("showHide").onclick = function() {
    var theDiv = document.getElementById("foo");
    if(theDiv.style.display == 'none') {
        theDiv.style.display = 'block';
        this.innerHTML = 'Hide';
    } else {
        theDiv.style.display = 'none';
        this.innerHTML = 'Show';
    }
}
</script>

<span id="showHide">Show</span>
<div id="foo" style="display:none">
<form method="post">
    <h3>Here are some reasons</h3>
    Blah: <input type="checkbox"/><br />
    Blah: <input type="checkbox"/><br />
    Blah: <input type="checkbox"/><br />
<input type="submit" value="submit" />
</form>
</div>

Try it here: http://jsfiddle.net/8TNmn/2/ and see http://stackoverflow.com/questions/2757999/click-to-show-more-maybe-js

karim79 2010-05-07 00:43:30

Don't you need a window.onload or a onclick='doSomething()'?

Christopher Altman 2010-05-07 00:52:45

There is an anonymous function attached to the show/hide element's click event. Why post 'dupe answer' under the original answer which I posted? I know the implementation is exactly the same, but I provided a working example with the type of markup the OP was talking about, *and* linked to the original question. My intention was not to cheat :)

karim79 2010-05-07 02:14:42

ansaurus

tags:

views:

answers:

How do I display field when I click on a link? (javascript)

related questions