Jquery help

Hi all,

I have found a jquery accordian script by Ryan Stemkoski called Stupid Simple Jquery Accordian menu, link here.

I have 5 accordianButtons, each with a different background url, not sure how it would be written in the jquery script, any suggestions greatly appreciated

thanks

jquery script

$(document).ready(function() {
 
	//ACCORDION BUTTON ACTION	
	$('div.accordionButton').click(function() {
		$('div.accordionContent').slideUp('normal');	
		$(this).next().slideDown('normal');
	});
 
	//HIDE THE DIVS ON PAGE LOAD	
	$("div.accordionContent").hide();
 
});

CSS

#wrapper {
width: 800px;
margin-left: auto;
margin-right: auto;
}

.accordionButton {
width: 800px;
height:50px;
float: left;
background url: (image.jpg) repeat;
cursor: pointer;
}

.accordionContent {
width: 800px;
float: left;
background: #95B1CE;
display: none;
}

HTML

<body>
	<div id="wrapper">
		<div class="accordionButton">Button 1 Content</div>
		<div class="accordionContent">Content 1<br /><br /><br /><br /><br /><br /><br /><br />Long Example</div>
		<div class="accordionButton">Button 2 Content</div>
		<div class="accordionContent">Content 2<br /><br /><br /><br /><br />Medium Example</div>
		<div class="accordionButton">Button 3 Content</div>
		<div class="accordionContent">Content 1<br />Short Example</div>
		<div class="accordionButton">Button 4 Content</div>
		<div class="accordionContent">Content 4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Extra Long Example</div>
	</div>
</body>

Firstly the major thing i would like to point out is accordion menus are built using <ol>, <ul> or <dl> because they are more semantic and easier to manage. Using <div> tags as the parent and child container is messy and can sometimes cause cross browser compatibility issues especially in IE.

Moving on though the easiest way i see about adding custom background images is to add a <span> element inside the parent element that contains the class/id for the background then on the parent element when the menu is open/closed toggle a class called active on the parent element. An easy way to go about this would be to create a sprite with all the background images and then build a class set to manage all the background positions.

It may sound a little confusing but to help you understand a little better i wrote an example below…

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Accordion Menu</title>
<style type="text/css">
<!--
    #accordion {
        list-style-type: none;
        margin: 0 auto;
        padding: 0;
    }
    
    #accordion, .accordTitle { width: 800px; }
    
    #accordion li {
        background-color: #95B1CE;
        display: none;
        padding: 8px;
    }
    
    #accordion li.accordTitle {
        background-color: transparent;
        display: block;
        padding: 0;
    }
    
    li.accordTitle span {
        background-color: #dedede;
        cursor: pointer;
        display: block;
        height: 24px;
        margin-bottom: 1px;
        padding: 0 5px;
        width: auto;
    }
    
    li.accordTitle span#btn1 { background-color: #cccccc; }
    li.accordTitle span#btn2 { background-color: #aed2e3; }
    li.accordTitle span#btn3 { background-color: #bcaee3; }
    li.accordTitle span#btn4 { background-color: #e6bdce; }
    
    #accordion li.apActive span {
        background-color: #1a1a1a;
        color: #ffffff;
    }
    
    li.apActive span#btn1 { background-color: #848484; }
    li.apActive span#btn2 { background-color: #769dae; }
    li.apActive span#btn3 { background-color: #8475ab; }
    li.apActive span#btn4 { background-color: #bb7c97; }
-->
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $('.accordTitle', '#accordion').click(function() {
            var self = this, $next = $(this).next();
            
            if ($next.is(':visible')) {
                $next.slideUp('normal', function() {
                    $(self).removeClass('apActive');
                });
            } else {
                $('.apActive').removeClass('apActive').next().slideUp('normal');
                $(this).addClass('apActive').next().slideDown('normal');
            }
        });
        
        $('li', '#accordion').each(function() {
            if ($(this).hasClass('.accordTitle')) {
                $(this).hide();
            }
        });
    });
</script>
</head>
<body>

<ol id="accordion">
    <li class="accordTitle">
        <span id="btn1">Button 1 Content</span>
    </li>
    <li>
        Content 1<br /><br /><br /><br /><br /><br /><br /><br />Long Example
    </li>
    <li class="accordTitle">
        <span id="btn2">Button 2 Content</span>
    </li>
    <li>
        Content 2<br /><br /><br /><br /><br />Medium Example
    </li>
    <li class="accordTitle">
        <span id="btn3">Button 3 Content</span>
    </li>
    <li>
        Content 3<br />Short Example
    </li>
    <li class="accordTitle">
        <span id="btn4">Button 4 Content</span>
    </li>
    <li>
        Content 4<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />Extra Long Example
    </li>
</ol>

</body>
</html>

As you can see the example uses background colors instead of a background image but its just an example, basically its more compact then the demo from the link in the article you posted and is 100% IE 6 compliant.

Let me know if any of this confuses you but the example above should help to explain a lot of your question.

thanks for your explanation, I will go through your example to see if I understand it clearly

SgtLegend,

Is it ok to use your jquery script

Go for it, I posted the example for you to play around with and use at your discretion.

sgtlegend,

have been playing around with the code and having some trouble figuring it out, the #accordian li will have 5 different colors instead of just the one (#95b1ce) as in your code
eg. welcome tab has background: url(…/images/blue-1.jpg) repeat-x, when you click it & it expands vertically, the color will be #394853, for about it will be #9eaeb3, for what to expect #99bcbc, so wouldn’t it be easier to use divs. Also have taken out the following code in the jquery as I didin’t want to use the li.apActive span as it made the photo in the design not work (eg see attachment) and now the code doesn’t seem to want to work (jquery newbie)

 
} else { 
      $('.apActive').removeClass('apActive').next().slideUp('normal');
      $(this).addClass('apActive').next().slideDown('normal');
}

This is the link to the actual site

thanks again