...

View Full Version : JqueryToggle toggling everything



pcproff
04-01-2011, 11:47 PM
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
04-02-2011, 12:04 AM
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
04-02-2011, 01:12 AM
Thats not what I was asking but thanks for the lesson in W3C standards

bullant
04-02-2011, 01:39 AM
no problem :)

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

venegal
04-02-2011, 03:50 AM
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


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

pcproff
04-02-2011, 06:14 AM
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum