c0deM0nK424
Programmer
hi folks - im using the W3 Schooles 'try it' editor - so i'd like you fire one of those up first and enter (copy/paste) the below code:
<!DOCTYPE html>
<html>
<head>
<script src="<script>
$(document).ready(function(){
$("#button1").click(function(){
$('p').eq(0).toggle();
});
});
$(document).ready(function(){
$("#button2").click(function(){
$('p').eq(1).toggle();
});
});
$(document).ready(function(){
$("#button3").click(function(){
$('p').eq(2).toggle();
});
});
$(document).ready(function(){
$("#button4").click(function(){
$('p').eq(3).toggle();
});
});
$(document).ready(function(){
$("#button5").click(function(){
$('p').eq(4).toggle();
});
});
$(document).ready(function(){
$("#button6").click(function(){
$('p').eq(5).toggle();
});
});
</script>
</head>
<body>
<h2>Toggle the Fruits !</h2>
<p>This is Apple !</p>
<button id="button1">Hide Apple!</button>
<p>This is Orange! </p>
<button id="button2">Hide Orange!</button>
<p>This is Banana!</p>
<button id="button3">Hide Banana!</button>
<p>This is Lemon !</p>
<button id="button4">Hide Lemon!</button>
<p>This is Kiwi!</p>
<button id="button5">Hide Kiwi!</button>
<p>This is Pear!</p>
<button id="button6">Hide Pear!</button>
</body>
</html>
Im guessing you've understood what im doing here. When button 1 gets clicked , the paragraph reading 'This is Apple!' vanishes. But when you click button 1 again, it appears. So im using the 'toggle' action here nothing more, to achieve the 'show and hide' thing.
clearly ive taken the long winded approach so if you know a tidier shorter way to accomplish the above that would be great.
if i clicked the button called 'hide pear!' then the paragraph 'i am pear!' will hide, if i click it again it shows.
Q - when i click the button , the paragraph hides. at this point how can I make the buttons text change to 'show pear' ?
cos at the moment it stays as 'hide pear'.
this must apply for all paragraphs/fruits.
so clicking any button should change its text to 'show pear' or 'hide pear' depending on if its been clicked once already.
tips ?
<!DOCTYPE html>
<html>
<head>
<script src="<script>
$(document).ready(function(){
$("#button1").click(function(){
$('p').eq(0).toggle();
});
});
$(document).ready(function(){
$("#button2").click(function(){
$('p').eq(1).toggle();
});
});
$(document).ready(function(){
$("#button3").click(function(){
$('p').eq(2).toggle();
});
});
$(document).ready(function(){
$("#button4").click(function(){
$('p').eq(3).toggle();
});
});
$(document).ready(function(){
$("#button5").click(function(){
$('p').eq(4).toggle();
});
});
$(document).ready(function(){
$("#button6").click(function(){
$('p').eq(5).toggle();
});
});
</script>
</head>
<body>
<h2>Toggle the Fruits !</h2>
<p>This is Apple !</p>
<button id="button1">Hide Apple!</button>
<p>This is Orange! </p>
<button id="button2">Hide Orange!</button>
<p>This is Banana!</p>
<button id="button3">Hide Banana!</button>
<p>This is Lemon !</p>
<button id="button4">Hide Lemon!</button>
<p>This is Kiwi!</p>
<button id="button5">Hide Kiwi!</button>
<p>This is Pear!</p>
<button id="button6">Hide Pear!</button>
</body>
</html>
Im guessing you've understood what im doing here. When button 1 gets clicked , the paragraph reading 'This is Apple!' vanishes. But when you click button 1 again, it appears. So im using the 'toggle' action here nothing more, to achieve the 'show and hide' thing.
clearly ive taken the long winded approach so if you know a tidier shorter way to accomplish the above that would be great.
if i clicked the button called 'hide pear!' then the paragraph 'i am pear!' will hide, if i click it again it shows.
Q - when i click the button , the paragraph hides. at this point how can I make the buttons text change to 'show pear' ?
cos at the moment it stays as 'hide pear'.
this must apply for all paragraphs/fruits.
so clicking any button should change its text to 'show pear' or 'hide pear' depending on if its been clicked once already.
tips ?