+ Post New Thread
Results 1 to 2 of 2
Web Development Thread, Jquery Accordian in Coding and Web Development; I've put this together from various snippets from the web: Code: $(function() { $('.accordian li:odd:gt(0)').hide(); $('.accordian li:first').css("background-image", "url(customnav_selected.png)"); $('.accordian li:even:even').addClass('even'); ...
  1. #1

    Join Date
    Apr 2006
    Location
    UK
    Posts
    939
    Thank Post
    39
    Thanked 70 Times in 54 Posts
    Rep Power
    29

    Jquery Accordian

    I've put this together from various snippets from the web:

    Code:
    $(function() {
    	$('.accordian li:odd:gt(0)').hide();
    	$('.accordian li:first').css("background-image", "url(customnav_selected.png)"); 
    	$('.accordian li:even:even').addClass('even');
    	$('.accordian li:even:odd').addClass('odd');
    	$('.accordian li:even').css('cursor', 'pointer');
    	$('.accordian li:even').click( function() {
    		var cur = $(this).next();
    		var old = $('.accordian li:odd:visible');
    		if ( cur.is(':visible') )
    			return false;
    		old.slideToggle(500);
    		cur.stop().slideToggle(500);
    		$(this).css("background-image", "url(customnav_selected.png)"); 
    		old.prev().css("background-image", "url(customnav_available.png)"); 
    	} );
    });
    HTML

    HTML Code:
    <div class="accordian">
    <ul>
    	<li><h3>School</h3></li>
    	<li>
    	<a href="school.html">School Information</a>
    	<a href="school.html">School Contact</a>
    	</li>
    
    	<li><h3>Staff</h3></li>
    	<li>
    	<a href="staff.html">Staffroom</a>
    	</li>
    </ul>
    </div>
    Jquery 1.2.3

    Its currently opens the first even <li> being School, what I want to be able to do is specifiy the <li> to open rather than it being based on if the list element is odd or even.

    Can anyone give me any pointers?

  2. #2

    Join Date
    Jan 2008
    Posts
    86
    Thank Post
    6
    Thanked 16 Times in 12 Posts
    Rep Power
    17
    Are you using this for a menu? At the risk of sounding silly, do you really want an accordion?

    This isn't a function I've ever used, but I've always found the jQuery documentation to be really good. I'm sure you've probably already used it, but there is a lovely example whose source you could copy and modify if you definitely want this effect: UI/API/1.7.2/Accordion - jQuery JavaScript Library

    It looks as though you can use the "activate" method to open a specific content item.
    Last edited by NotSoFast; 17th August 2009 at 08:08 PM.

SHARE:
+ Post New Thread

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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