JqueryToggle toggling everything

[pcproff]

OK so problem is pretty clear here when i click on any of the section id's all of my p class bottoms open up. Is there a way besides writing class=1,class=2 etc to avoid this issue?

Thanks all!

<section id="clickme"><h3>Latest work</h3>
<img src="images/placeholder.gif" class="placeholder"/>
<p class="bottom">This is the toggle!</p>
</section>

<section id="clickme"><h3>Who we are</h3>
<p class="bottom">This is the toggle!</p>
</section>

<section id="clickme"><h3>Services</h3>
<p class="bottom">This is the toggle!</p>
</section>

<section id="clickme"><h3>Contact Us</h3>
<p class="bottom">This is the toggle!</p>
</section>

<footer>text</footer>
<script type="text/javascript" charset="utf-8">
$("#clickme").click(function () {
$(".bottom").slideToggle("fast");
});
</script>

[bullant]

Elements with the same id is invalid html. Id's must be unique on a page. Classes are used to group elements with the same "name".

[pcproff]

Thats not what I was asking but thanks for the lesson in W3C standards

[bullant]

no problem

and I think having multiple elements with the same id is part of the problem

[venegal]

bullant is absolutely right — you have to change those ids to classes.

That said, $(".bottom") is a jQuery object containing all elements with the class "bottom", and any method you call on that object will be executed on all the elements it contains.

What you really want to do is calling the method only on the one element that is a child of the clicked element, and that can be achieved with

PHP Code:

$('.clickme').click(function () {
    $(this).find('.bottom').slideToggle('fast');
}); 


[pcproff]

This is excellent! This is why I love this forum, I came here asking one question and I ended up learning two things! Thanks guys, that "this." is the magic ingredient.