This is paragraph 1.
This is paragraph 2.
This is paragraph 3.
This is paragraph 4.
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
function selectElement0() {
$('p')[0].innerHTML="Hello there!";
}
function selectElement1() {
$('p')[1].innerHTML="How ya doing!";
}
function selectElement2() {
$('p')[2].innerHTML="Glad you stopped by";
}
function selectElement3() {
$('p')[3].innerHTML="You come back, ya hear";
}
function reset4() {
$('p')[3].innerHTML="This is paragraph 4";
}
function reset5() {
$('p')[0].innerHTML="This is paragraph 1";
$('p')[1].innerHTML="This is paragraph 2";
$('p')[2].innerHTML="This is paragraph 3";
$('p')[3].innerHTML="This is paragraph 4";
}
</script>
<style type="text/CSS">
<!--
.code { color: red; }
.back { background-color: yellow; }
-->
</style>
</head>
<body>
<h1>jQuery: Hide and show paragraphs with innerHTML()</h1>
<div>
<p>This is paragraph 1.</p>
<p>This is paragraph 2.</p>
<p>This is paragraph 3.</p>
<p>This is paragraph 4.</p>
</div>
<form action="">
<input type = "button" value="Select paragraph 1" onclick="selectElement0()"></input>
<input type = "button" value="Select paragraph 2" onclick="selectElement1()"></input>
<input type = "button" value="Select paragraph 3" onclick="selectElement2()"></input>
<input type = "button" value="Select paragraph 4" onclick="selectElement3()"></input>
<input type = "button" value="Reset paragraph 1" onclick="reset1()"></input>
<input type = "button" value="Reset paragraph 2" onclick="reset2()"></input>
<input type = "button" value="Reset paragraph 3" onclick="reset3()"></input>
<input type = "button" value="Reset paragraph 4" onclick="reset4()"></input>
<input type = "button" value="Reset ALL" onclick="reset5()"></input>
</form>