Hello, I've only just started learning Javascript and the below code isn't working any pointers would be greatly appreciated;

I want to create and on click function which changes the .style.display = inline, as well as setting the other id's to display none.

<script>

$(document).ready(function() {



document.getElementById("one").style.display="none";
document.getElementById("two").style.display="none";
document.getElementById("three").style.display="none";

function myfunc()
{
if(id == top) {
document.getElementById("one").style.display="inline";
}
else if

(id == mid)
document.getElementById("two").style.display="inline";

else

(id == bottom)
document.getElementById("three").style.display="inline";
return true;

}
});


</script>



<body >

<p id="top" onclick="myfunc()">First Para</p>

<p id="mid" onclick="myfunc()">2nd Para</p>

<p id="bottom" onclick="myfunc()">Third Para</p><br />


<p id="one">Displayed 1st para</p><br />

<p id="two">Displayed 2nd para</p><br />

<p id="three">Displayed 3rd para</p><br />


</body>


Thank you