Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Apr 2011
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts

    Question Accordion Should Stay Open, Help? :S

    Hey guys,

    I'm somewhat new to Jquery, so I know this is going to be very simple for you clever people, but I just don't know enough commands yet.

    Basically, I have an accordion which works beautifully, but the issue is that if you click the selected button, the whole thing closes, like this:



    I need it to always be open! So I guess remove the click function from the selected state?

    Jquery as follows:
    Code:
    $(document).ready(function() {	 
    	
    	$('.accordionButton').click(function() {		
    		$('.accordionButton').removeClass('on');
    		$('.accordionButton').removeClass('orig');		
    	 	$('.accordionContent').slideUp('normal');   
    		
    		if($(this).next().is(':hidden') == true) {		
    			$(this).addClass('on');			  		
    			$(this).next().slideDown('normal');
    		 } 		  
    	 });
    	  	
    	
    	$('.accordionButton').mouseover(function() {
    		$(this).addClass('over');		
    	
    	}).mouseout(function() {
    		$(this).removeClass('over');										
    	});	
    	
    	$('.accordionContent').hide();
    	$('.first').slideDown('normal');
    
    });
    Html:
    Code:
    <div id="accordionWrapper">
      
        <div class="accordionButton orig">Test1</div>
        <div class="accordionContent first">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras dignissim volutpat dolor, non porta odio venenatis in. Sed a justo et diam sodales consectetur imperdiet ac lacus. Cras vehicula nulla ullamcorper est posuere id feugiat mi rhoncus. Maecenas pretium sem ut felis lacinia porttitor. Nam id metus eleifend odio scelerisque dictum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. In a ante dui. Phasellus scelerisque fringilla felis, sit amet adipiscing ante tristique id. Aenean venenatis dui nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed lobortis nisi sit amet lorem accumsan at dapibus justo tristique. Duis ipsum ante, pharetra quis dapibus sed, viverra sed justo.
    	</div>
        
    	<div class="accordionButton">Test2</div>        
    	<div class="accordionContent">Nam euismod ultricies enim at tincidunt. Sed neque lacus, porttitor vitae placerat ut, gravida ac arcu. Suspendisse potenti. Suspendisse eleifend lorem non ligula lobortis vitae accumsan ligula commodo. Quisque suscipit, libero in fringilla elementum, enim elit bibendum ligula, vitae sodales lacus nunc vitae est. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam at lacus ut lectus auctor viverra vel ac justo. In quis neque enim. Integer lobortis orci et enim convallis dignissim. Donec sed ullamcorper lacus. Phasellus eget sagittis libero. Vivamus dictum luctus tempor. Fusce sodales, purus ut blandit lacinia, quam massa placerat diam, sit amet fermentum lectus odio ac ante. Nullam ultricies dapibus bibendum. Quisque rutrum augue nec nisi blandit varius. Ut eleifend pretium nisl.
    	</div>
    
    	<div class="accordionButton">Test3</div>
    	<div class="accordionContent borderbottom">Nulla eu nisi tellus. Aliquam sit amet tortor quam, ut auctor augue. In sed justo id tortor scelerisque mattis. Nam ultricies interdum tellus ac sodales. Sed et nibh arcu, sed sagittis ligula. Mauris ut porttitor diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed in ligula massa. Donec in nisl diam.
    	</div>	
            
    </div>
    Working example here: http://www.juicenothing.com/freelance/accordion/

    Hope you can help! Will love you forever!

  • #2
    New Coder
    Join Date
    Apr 2011
    Posts
    25
    Thanks
    4
    Thanked 0 Times in 0 Posts
    Thanks for all the "help" guys, lol.

    In case anyone wants to know, I fixed it with the following:

    Code:
    $('.accordionButton').click(function(e) {	
    	if ($(this).hasClass('orig') || $(this).hasClass('on') ==true)	{
    		e.preventDefault();
    		} else {		 
    			
    		$('.accordionContent').slideUp('normal');	
    		$('.accordionButton').removeClass('on');
    		$('.accordionButton').removeClass('orig');
    		
    		if($(this).next().is(':hidden') == true) {				
    			
    		$(this).addClass('on');	
    		$(this).next().slideDown('normal');
    		 
    		}
    	}
    });


  •  

    Tags for this Thread

    Posting Permissions

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