Jquery Accordion

pennella · 09-26-2010, 11:20 PM

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?

abduraooft · 09-27-2010, 08:47 AM

Start with fixing the errors in your markup, see http://validator.w3.org/check?verbos...ion%2Fbts.html

pennella · 09-27-2010, 11:27 PM

I fixed all but one error.

Quote:

Most likely, you nested tags and closed them in the wrong order. For example ... is not acceptable, as must be closed before . Acceptable nesting is: ...

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.

abduraooft · 09-28-2010, 08:01 AM

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');
    });

pennella · 09-28-2010, 11:19 PM

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.

pennella · 09-28-2010, 11:45 PM

By the way, i got the tutorial from here:
http://www.stemkoski.com/stupid-simp...ccordion-menu/

SB65 · 09-29-2010, 09:44 AM

Try removing the float from .accordionContent - I don't think you need it here.

pennella · 09-29-2010, 10:38 PM

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.

Quote:

/**************************************************************************************************** *******************
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

SB65 · 09-30-2010, 01:17 PM

Try:

Code:

$('div.accordionButton').click(function() {
        $('div.accordionContent').slideToggle('normal');    
        $(this).next().slideToggle('normal');
    });

pennella · 10-02-2010, 07:36 PM

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.

SB65 · 10-03-2010, 08:44 AM

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.

pennella · 10-03-2010, 08:40 PM

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.

esedic · 03-15-2011, 09:46 AM

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