Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Nov 2006
    Posts
    71
    Thanks
    12
    Thanked 0 Times in 0 Posts

    JqueryToggle toggling everything

    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>

  • #2
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    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".

  • Users who have thanked bullant for this post:

    pcproff (04-02-2011)

  • #3
    New Coder
    Join Date
    Nov 2006
    Posts
    71
    Thanks
    12
    Thanked 0 Times in 0 Posts
    Thats not what I was asking but thanks for the lesson in W3C standards

  • #4
    Banned
    Join Date
    Feb 2011
    Posts
    2,699
    Thanks
    13
    Thanked 395 Times in 395 Posts
    no problem

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

  • #5
    Gütkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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');
    }); 

  • Users who have thanked venegal for this post:

    pcproff (04-02-2011)

  • #6
    New Coder
    Join Date
    Nov 2006
    Posts
    71
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Smile

    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.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •