How to show a hidden text box after clicking a link?

Question

I want to show a hidden text box when I click on a certain link.

Here is my code so far:

HTML:

<a onclick="show()">Add Deposit Threshold</a>
<div id="dThreshold" style="display:none">
    <table class="table">
        <tr>
            <td><b>Deposit Threshold</b></td>
            <td>
                <div class="row">
                    <div class="col-xs-12">
                        <input type="text" class="form-control" name="Threshold">
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>

JavaScript

<script type="text/javascript">
function show() {
    document.getElementById("dThreshold").display ="block";
}
</script>

I hope you guys can help me. Thank you.

Answer 1

While you have a number of answers already, I'd argue that you should move the JavaScript outside of the HTML and use unobtrusive JavaScript, which would also allow you to make the function more generally applicable. My first suggestion would be to use DOM traversal to find the appropriate <div> element to show:

// naming the function, the event argument
// is supplied automatically from the
// EventTarget.addEventListener() method:
function show(event) {

  // stopping the event bubbling (assuming you
  // want to, if not remove the line):
  event.stopPropagation();

  // finding the next element-sibling of the clicked
  // element, and setting the display property of the
  // element's style objects to 'block':
  this.nextElementSibling.style.display = 'block';
}

// creating an array from all the <a> elements with the class
// of 'toggle':    
var toggles = Array.from(document.querySelectorAll('a.toggle'));

// iterating over the Array of elements using
// Array.prototype.forEach():
toggles.forEach(function(toggle) {
  // 'toggle' the array-element of the array
  // over which we're iterating.

  // setting the function show() as the
  // event-handler for the 'click' event:
  toggle.addEventListener('click', show);
});

function show(event) {
  event.stopPropagation();
  this.nextElementSibling.style.display = 'block';
}

var toggles = Array.from(document.querySelectorAll('a.toggle'));

toggles.forEach(function(toggle) {
  toggle.addEventListener('click', show);
});

a.toggle {
  display: block;
}

<a href="#" class="toggle">Add Deposit Threshold</a>
<div style="display:none">
  <table class="table">
    <tr>
      <td><b>Deposit threshold</b>
      </td>
      <td>
        <div class="row">
          <div class="col-xs-12">
            <input type="text" class="form-control" name="threshold">
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>
<a href="#" class="toggle">Add other details</a>
<div style="display:none">
  <table class="table">
    <tr>
      <td><b>Other details</b>
      </td>
      <td>
        <div class="row">
          <div class="col-xs-12">
            <input type="text" class="form-control" name="other">
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>

JS Fiddle demo.

However, it would seem to make more sense to add a toggle function, rather than simply a 'show' function:

function show(event) {
  event.stopPropagation();

  // caching references to those elements/checks we
  // use more than once, to avoid unnecessary DOM
  // look-ups:

  // 'self' is the clicked link:
  var self = this,

  // 'target' is the next element-sibling (the <div>
  // containing the <table>):
    target = this.nextElementSibling,

  // 'check' is the result of assessing if the
  // current display of the 'target' element is
  // 'block'; if it is the variable is true, if
  // not then variable is false:
    check = target.style.display === 'block';

  // updating the display, if it is currently set
  // to 'block' we set it to 'none', if it's
  // currently not set to 'block' (so hidden) we
  // set it to 'block' (to show):
  target.style.display = check ? 'none' : 'block';

  // here we add a new class to the clicked element,
  // in order that we can use CSS generated-content
  // to appropriately toggle the link text between
  // 'Open' and 'Close' to reflect the action the link
  // will perform:
  self.classList.toggle('open', !check);
}

var toggles = Array.from(document.querySelectorAll('a.toggle'));

toggles.forEach(function(toggle) {
  toggle.addEventListener('click', show);
});

The above JavaScript is coupled with the following CSS:

a.toggle {
/* to force the <a> elements of class 'toggle'
   to occupy new lines (to minimise the visual
   disturbance of a <div> and its descendant
   <table> suddenly appearing): */
  display: block;
}

a.toggle::before {
/* Setting the 'default' text of the
   relevant <a> elements to be prepended
   with the 'text of 'Open': */
  content: 'Open ';
}

a.toggle.open::before {
  /* Prepending the link, when the <div>
     is shown, with the text 'Close ': */
  content: 'Close ';
}

// comments to avoid having the JS
// hidden under the panel label 
function show(event) {
  event.stopPropagation();
  var self = this,
    target = this.nextElementSibling,
    check = target.style.display === 'block';
  target.style.display = check ? 'none' : 'block';
  self.classList.toggle('open', !check);
}

var toggles = Array.from(document.querySelectorAll('a.toggle'));

toggles.forEach(function(toggle) {
  toggle.addEventListener('click', show);
});

a.toggle {
  display: block;
}
a.toggle::before {
  content: 'Open ';
}
a.toggle.open::before {
  content: 'Close ';
}

<a href="#" class="toggle">Deposit Threshold</a>
<div style="display:none">
  <table class="table">
    <tr>
      <td><b>Deposit threshold</b>
      </td>
      <td>
        <div class="row">
          <div class="col-xs-12">
            <input type="text" class="form-control" name="threshold">
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>
<a href="#" class="toggle">other details</a>
<div style="display:none">
  <table class="table">
    <tr>
      <td><b>Other details</b>
      </td>
      <td>
        <div class="row">
          <div class="col-xs-12">
            <input type="text" class="form-control" name="other">
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>

JS Fiddle demo.

Answer 2

Use the following code instead (i.e., access the style property first):

function show() {
    //document.getElementById("dThreshold").display ="block";
    document.getElementById("dThreshold").style.display ="block";
}

Here is the full source code for a sample HTML page:

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        function show() {
            //document.getElementById("dThreshold").display ="block";
            document.getElementById("dThreshold").style.display = "block";
        }
    </script>
</head>
<body>
    <a href="javascript:void(0);" onclick="show();">Add Deposit Threshold</a>
    <div id="dThreshold" style="display: none">
        ...
    </div>
</body>
</html>

Answer 3

I think you should change

document.getElementById("dThreshold").display ="block";

to

document.getElementById("dThreshold").style.display ="block";

Answer 4

Here's your trouble:

document.getElementById("dThreshold").style.display ="block";

Correct syntax is to include style.

You also need a place to click:

<form>
       <input type="button" onclick="show()" value="click here" />
       </form>

Answer 5

Edit: If you're not using Jquery, the other comments around accessing style are correct.

Here is a quick example which you can understand and modify to fit your needs:

javascript:

$('#show').click(function(){
    $('input').css('display', 'block');
})

html:

<a href="#" id="show">Click me!</a>
<input type="input" class="input"/>

css:

input {
  display: none;
}

JSFiddle

Answer 6

Try this:

Note: Include script before the html. Otherwise show() will be undefined.

<script>
function show() {
   document.getElementById("dThreshold").style.display ="block";    
}
</script>

<a onclick="show()">Add Deposit Threshold</a>
 <div id="dThreshold" style="display:none">
  <table class="table">
 <tr>
  <td><b>Deposit Threshold</b></td>
  <td><div class="row"><div class="col-xs-12"><input type="text" class="form-control" name="Threshold"></div></div></td>
      </tr>
      </table>
       </div>