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
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts

    Jquery Accordion Multiple Openings

    Hey guys.
    having some more trouble on my accordion again.
    I want to (on click) open only one chapter and then on the next click on the same button close that chapter. My problem is...when i click on chapter one...chapter two opens as well and ergo closes when i click chapter 1 again.

    See it here:
    www.truthv2.com/religion/bts.html

  • #2
    New Coder
    Join Date
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts
    Heres the link for the tutorial. I couldn't find why i had an error

    http://www.stemkoski.com/stupid-simp...ccordion-menu/

  • #3
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Your best approach would be to first remove those line breaks you have between .accordionButton and .accordionContent, and instead add the following to your css:

    Code:
        .accordionButton{clear:left;margin-bottom:2em}
        .accordionContent{clear:left}
    You then have each .accordionButton and .accordionContent adjacent to each other in the code and hence you can amend your javascript to:

    Code:
    $(document).ready(function() {
     
    //ACCORDION BUTTON ACTION    
    $('div.accordionButton').click(function() {
            $(this).next('.accordionContent').slideToggle('normal');
        });
     
    //HIDE THE DIVS ON PAGE LOAD    
    $("div.accordionContent").hide();
     
    });
    So here we apply the slide to the next element (next()) from the clicked element (this()), making sure it's the .accordionContent.

  • #4
    New Coder
    Join Date
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts
    Thank you for your help.
    I did those changes and now the accordion doesn't open at all.

    Your thoughts?
    http://www.truthv2.com/religion/bts.html

  • #5
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    You haven't removed the line breaks as I suggested - this is necessary so that the .accordionContent is the next item within the html to the .accordionButton.

  • Users who have thanked SB65 for this post:

    pennella (10-13-2010)

  • #6
    New Coder
    Join Date
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts
    Truly a genius. Thank you once again for your help with this project.


  •  

    Posting Permissions

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