jQuery how to open independently 2 buttons with slide effect (solved)

Liani · 02-12-2010, 10:26 AM

hi

first of all i wanted to say that i have no idea of coding with any language, and that the code that i use was found from searching. i needed for my blog a hidden-toggle-slide effect for my text.

i was trying to copy-paste from tutorials the code but most times that didnt work, when i found the code i was looking for i tested it and found this problem.

when you post 1 button it works fine, but when you post 2 it has the problem that it opens both of the hidden text (sorry about talking this much but it's the first time i am asking for help in this forum, and i am not sure how to explain my problem).

this is the code that i am using

Code:

<!doctype html>


  <style>
  p { width:400px; 
display:none; }
  </style>
  <script src="/scripts/jquery-1.4.js"></script>


	<button>Toggle</button>

  <p>
    This is the paragraph to end all paragraphs.  You
    should feel <em>lucky</em> to have seen such a paragraph in
    your life.  Congratulations!
  </p>
<script>
    $("button").click(function () {
      $("p").slideToggle("slow");
    });
</script>

</!doctype>

also this is my test blog so you could see the problem i am talking about http://qweje.blogspot.com/

and if there are any questions please ask them i ll help as much i can thank you in advance

(if i posted it in the wrong place i apologise)

Spudhead · 02-12-2010, 03:46 PM

There's a few ways to do what you're doing.

The code you posted uses a javascript framework - basically a box of tools - called jQuery. Being familar with jQuery selectors will make it easier for you to understand what's going on in the code and tweak it to behave how you want.

The problem that you're having is caused by the fact that your code is selecting ALL the paragraph elements. You don't want that: you just want to affect a particular paragraph.

One way to get around it is to give your buttons and your paragraphs ID tags. This will let you tie a particular button to a corresponding paragraph:

Code:

<p id="paragraph_one">Hello World</p>
<button id="button_one">Toggle</button>

with that HTML, you can then tell specific elements what to do:

Code:

$("#button_one").click(function () {
	$("#paragraph_one").slideToggle("slow");
});

(note the # symbol that tells jQuery to look for an element with that ID)

Now, that's fine - but you've probably noticed that if you've got more than one paragraph-and-button combination on your page, you're going to have to copy that javascript code for each one, like so:

Code:

$("#button_one").click(function () {
	$("#paragraph_one").slideToggle("slow");
});

$("#button_two").click(function () {
	$("#paragraph_two").slideToggle("slow");
});

$("#button_three").click(function () {
	$("#paragraph_three").slideToggle("slow");
});

That's not great. It might be the best solution, depending on how your HTML is put together, but there might be another way: instead of telling the button explicitly which paragraph to open, make it work it out for itself.

There are a couple of ways to do this. One way is to use jQuery's next() function to tell the button that it should be controlling the paragraph right next to it:

Code:

$("button").click(function () {      // when any button is clicked
	$(this).next("p").slideToggle("slow");      // find the next paragraph tag and toggle it
});

Another way is to work out the ID of the paragraph from the ID of the button. So a button called "button_one" will look for a paragraph called "paragraph_one", and a button called "intro_button" will look for a paragraph called "intro_paragraph".

Code:

$("button").click(function () {
	var this_button_id = $(this).attr("id");
	var target_paragraph_id = this_button_id.replace("button", "paragraph");
	$("#" + target_paragraph_id).slideToggle("slow");
});

Each method has its own advantages and drawbacks - it depends how you've structured your HTML and how flexible you want your javascript to be.

Any help?

Liani · 02-14-2010, 08:27 AM

thank you very much

works like a charm

i used the first way you gave because the others where too complicated for me xD, but i ll look into the rest two codes later

.

Finished Example