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 13 of 13
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts

    Jquery Accordion

    Hey Guys,
    I'm having an issue trying to get my accordion to work, essentially i want it to expand a div to show that chapters contents, but it's not expanding.
    2ndly-My footer isn't positioning itself at the bottom of the page in Chrome.

    Heres the link to my page:
    http://www.truthv2.com/religion/bts.html
    Any ideas?

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    Start with fixing the errors in your markup, see http://validator.w3.org/check?verbos...ion%2Fbts.html
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    New Coder
    Join Date
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts
    I fixed all but one error.
    Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

    Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists require appropriate list items (<ul> and <ol> require <li>; <dl> requires <dt> and <dd>), and so on.

    Still doesn't work.

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,865
    Thanks
    160
    Thanked 2,224 Times in 2,211 Posts
    I think that's because of missing <title> tag inside <head>. The clue given by validator is misleading.

    Now, have a try by reversing the action orders, like
    Code:
    $('div.accordionButton').click(function() {
            $('div.accordionContent').slideDown('normal');    
            $(this).next().slideUp('normal');
        });
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • Users who have thanked abduraooft for this post:

    pennella (10-03-2010)

  • #5
    New Coder
    Join Date
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts
    Alright. Now the content "expands" but the div its in doesn't. For example...the text loads ("Expands") but the div with a background image doesn't expand with it and also doesn't push down the footer. the footer remains in the same position.

  • #6
    New Coder
    Join Date
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts
    By the way, i got the tutorial from here:
    http://www.stemkoski.com/stupid-simp...ccordion-menu/

  • #7
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Try removing the float from .accordionContent - I don't think you need it here.

  • #8
    New Coder
    Join Date
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts
    Great that worked. I do still have a problem
    I was using a javascript framework that didn't allow the content to close when i clicked on the button again.

    This is the javascript that the author uses on a page that does just that. However, when i use it on my page, the content doesn't expand at all.
    /**************************************************************************************************** *******************
    DOCUMENT: includes/javascript.js
    DEVELOPED BY: Ryan Stemkoski
    COMPANY: Zipline Interactive
    EMAIL: ryan@gozipline.com
    PHONE: 509-321-2849
    DATE: 3/26/2009
    UPDATED: 3/25/2010
    DESCRIPTION: This is the JavaScript required to create the accordion style menu. Requires jQuery library
    NOTE: Because of a bug in jQuery with IE8 we had to add an IE stylesheet hack to get the system to work in all browsers. I hate hacks but had no choice .
    **************************************************************************************************** ********************/
    $(document).ready(function() {

    //ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
    $('.accordionButton').click(function() {

    //REMOVE THE ON CLASS FROM ALL BUTTONS
    $('.accordionButton').removeClass('on');

    //NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
    $('.accordionContent').slideUp('normal');

    //IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
    if($(this).next().is(':hidden') == true) {

    //ADD THE ON CLASS TO THE BUTTON
    $(this).addClass('on');

    //OPEN THE SLIDE
    $(this).next().slideDown('normal');
    }

    });


    /*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/

    //ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
    $('.accordionButton').mouseover(function() {
    $(this).addClass('over');

    //ON MOUSEOUT REMOVE THE OVER CLASS
    }).mouseout(function() {
    $(this).removeClass('over');
    });

    /*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/


    /**************************************************************************************************** ****************
    CLOSES ALL S ON PAGE LOAD
    **************************************************************************************************** ****************/
    $('.accordionContent').hide();

    });
    Any thoughts?

    Here's the site he uses it on:
    http://www.stemkoski.com/downloads/j...te/example.htm
    http://www.stemkoski.com/downloads/j.../javascript.js

  • #9
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Try:

    Code:
    $('div.accordionButton').click(function() {
            $('div.accordionContent').slideToggle('normal');    
            $(this).next().slideToggle('normal');
        });
    Last edited by SB65; 09-30-2010 at 02:19 PM.

  • Users who have thanked SB65 for this post:

    pennella (10-03-2010)

  • #10
    New Coder
    Join Date
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts
    To be clear, you want me to put that in the JS file.
    Should i take out everything else and replace it with
    Code:
    $('div.accordionButton').click(function() {
            $('div.accordionContent').slideToggle('normal');    
            $(this).next().slideToggle('normal');
        });
    If so...i tired that and it doesn't expand.

  • #11
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,957
    Thanks
    9
    Thanked 727 Times in 721 Posts
    Replace this code:

    Code:
    $('div.accordionButton').click(function() {
    		$('div.accordionContent').slideUp('normal');	
    		$(this).next().slideDown('normal');
    	});
    with the posted code. It still needs to sit within your document ready function.

  • Users who have thanked SB65 for this post:

    pennella (10-03-2010)

  • #12
    New Coder
    Join Date
    Mar 2009
    Posts
    90
    Thanks
    24
    Thanked 2 Times in 2 Posts
    WORKS!
    THank you.

    Does anyone have any idea as to why the footer is in the middle of the page in Chrome?

    I dont know if its a CSS or javascript error.

  • #13
    New to the CF scene
    Join Date
    Nov 2007
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I found this thread by searching for a solution for a IE7 problem I have.
    I'm using the same jQuery accordion, only the updated version where slideUp/slideDown is used instead of slideToggle as @SB65 proposed.

    If you go to this url with IE7: http://bit.ly/eTF2wT, you will see that block that is expanded with accordion efect doesn't push bottom element, but it overlaps it.

    I'm banging my head for two days now and I can't get it to work properly in IE7.

    Any help would be appreciated.

    Regards, Elis


  •  

    Posting Permissions

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