Go Back   CodingForums.com > :: Client side development > JavaScript programming > JavaScript frameworks

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 08-22-2012, 11:14 AM   PM User | #1
LegoTrip
New Coder

 
Join Date: Apr 2011
Posts: 25
Thanks: 4
Thanked 0 Times in 0 Posts
LegoTrip is an unknown quantity at this point
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!
LegoTrip is offline   Reply With Quote
Old 08-23-2012, 02:13 PM   PM User | #2
LegoTrip
New Coder

 
Join Date: Apr 2011
Posts: 25
Thanks: 4
Thanked 0 Times in 0 Posts
LegoTrip is an unknown quantity at this point
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');
		 
		}
	}
});
LegoTrip is offline   Reply With Quote
Reply

Bookmarks

Tags
accordion, jquery

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 11:39 PM.


Advertisement
Log in to turn off these ads.