SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Thread: jquery help

  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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
    Code:
    $(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
    Code:
    <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>

  2. #2
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    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...

    HTML Code:
    <!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.

  3. #3
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks for your explanation, I will go through your example to see if I understand it clearly

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    SgtLegend,

    Is it ok to use your jquery script

  5. #5
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,197
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    Go for it, I posted the example for you to play around with and use at your discretion.

  6. #6
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Posts
    51
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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)

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

    This is the link to the actual site

    thanks again
    Attached Images Attached Images


Bookmarks

Posting Permissions

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