CODEWITHSUNDEEP
javascript
ggfan
ggfan

Reputation: 2492

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

how do I create it so that when I click "report user", a box displays and it shows a list of reasons why to report the user and a submit button.

I rarely use javascript...can someone point me in the right direction.

Upvotes: 1

Views: 2601

Answers (5)

Christopher Altman
Christopher Altman

Reputation: 4896

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

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

  4. 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">  
<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>

Upvotes: 1

karim79
karim79

Reputation: 342665

<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 Click to show more - maybe JS?

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

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()

Upvotes: 0

derek
derek

Reputation: 4886

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()});

Upvotes: 0

dlamotte
dlamotte

Reputation: 6385

Look into onclick events.

Upvotes: 0

Related Questions