Basically I have 6 buttons and 6 paragraphs (each one button relating to a specific paragraph). I want to show a paragraph of text when a certain button is clicked, and then hide that paragraph when the button is clicked again.
I have looked through similar questions but cannot seem to get it to work. I think its because I have only started trying to use jquery and dont really understand the problem. All hep would be appreciated! thanks!
html:
<div class="button"><div class="button float_l"><a href="#">More..</a></div>
<div class="button"><div class="button float_l"><a href="#">More..</a></div>
<div class="button"><div class="button float_l"><a href="#">More..</a></div>
<p><div id="text1">Paragraph 1</div></p>
<p><div id="text2">Paragraph 2</div></p>
<p><div id="text3">Paragraph 3</div></p>
javascript:
$(document).ready(function () {
$("#text1").hide();
$(".button").click(function(){
$("#text1").toggle();
$("#text2").hide();
$(".button").click(function(){
$("#text1").toggle();
});
the first button should relate to the first paragraph and so on. Iv tried using the 'this' function to relate to a specific button but must be using it incorrectly because it dosent work.