"Tap to display" text?

Question

How do you make "Tap to display" text?
something like
<p onclick="showHelper()" >Main text</p>
<p id='text' style="display: none;">Secondary text</p>
<script>
function showHelper() {
document.getElementById('text').style.display = 'block';
}
</script>

but to use it more than one time in one webpage
cause i tried to put it twice
the second one doesn't display when you tap while the first one does

Answer 1

That's because the showHelper function is locked to one specific element; the element with the ID of 'text'. So, once it's been fired once, the deed is done. Any further attempts to use showHelper will fire it but there won't be any difference.

To solve this, I recommend that you use a variable as the ID in showHelper. Here's an example.

function showHelper(id) {
document.getElementById(id).style.display = 'block';
}

Answer 2

Ok thanks Ben
when i put it once it worked
when i put it twice both of them stopped working
this is what i used:

<p onclick="showHelper()">Module 1</p>
<p id="text" style="display: none;">text</p>
<script type="text/javascript">// <![CDATA[
function showHelper(id) {
document.getElementById(id).style.display = 'block';
}
// ]]></script>
<hr />
<p onclick="showHelper()">Module 2</p>
<p id="text" style="display: none;">text</p>
<script type="text/javascript">// <![CDATA[
function showHelper(id) {
document.getElementById(id).style.display = 'block';
}
// ]]></script>

Also is it possible to make it toggle click?
like you tap it to show text then tap it again to hide text