...

View Full Version : Jquery Accordion



pennella
09-27-2010, 12:20 AM
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, 09:47 AM
Start with fixing the errors in your markup, see http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.truthv2.com%2Freligion%2Fbts.html

pennella
09-28-2010, 12:27 AM
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.

abduraooft
09-28-2010, 09: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

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

pennella
09-29-2010, 12:19 AM
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-29-2010, 12:45 AM
By the way, i got the tutorial from here:
http://www.stemkoski.com/stupid-simple-jquery-accordion-menu/

SB65
09-29-2010, 10:44 AM
Try removing the float from .accordionContent - I don't think you need it here.

pennella
09-29-2010, 11: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.

/**************************************************************************************************** *******************
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/jquery-accordion-menu-update/example.htm
http://www.stemkoski.com/downloads/jquery-accordion-menu-update/includes/javascript.js

SB65
09-30-2010, 02:17 PM
Try:


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

pennella
10-02-2010, 08: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
$('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, 09:44 AM
Replace this 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, 09: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, 10: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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum