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 3 of 3
  1. #1
    New Coder
    Join Date
    Oct 2011
    Location
    Utah
    Posts
    37
    Thanks
    19
    Thanked 0 Times in 0 Posts

    How can I make a better accordion?

    I have come across this code that I have tried to add to but I am afraid that I have made of mess of it. I am not very experienced with Jquery or web design and I need help finding what I have done wrong and how I can be more efficient. Im sure there is a better simpler way to accomplish the same thing can anyone help?

    Is there a better/more efficient way to write this code?

    It has a couple bugs...

    When it animates the text and container div jump around for some reason.
    Sometimes the divs will animate up but not down.
    Here is a link to what it looks like right now: http://dl.dropbox.com/u/14080718/Final/NeedHelp.html

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    	<title>Nates Site</title>
    	
    
    		<script src="js/jquery-1.6.2.min.js" type="text/javascript" charset="utf-8"></script>
    		
    		
    		<script>
    		
    		$(document).ready(function() {
    
    
    
    		    // the currently loaded section 
    		    var curLoaded = 'about';
    
    
    
    		    // navigation trigger 
    		    $('#navbar a').each(function() {
    		        var $this = $(this);
    		        var target = $this.attr('href').split('#')[1];
    		        var $contentContainer = $('#contentContainer');
    		        var oldPos = 0;
    		        var newPos = 200;
    
    		        // add a click handler to each A tag 
    		        $this.click(function() {
    		            // if the container isn't open, then open it 
    		            if ($contentContainer.css('height') === '') {
    		                // trigger the animation 
    		                $contentContainer.animate({
    		                    height: newPos
    		                }, "slow", function() {
    		                    // fade in the content 
    		                    $('#' + target).fadeIn();
    		                });
    		            } else {
    		                if (curLoaded == target) {
    		                    $contentContainer.animate({
    		                        height: oldPos
    		                    }, "slow", function() {
    		                        $('#content div').hide();
    		                    });
    		                } else {
    		                    $contentContainer.animate({
    		                        height: oldPos
    		                    }, "slow", function() {
    		                        $('#content div').hide();
    		                        $contentContainer.animate({
    		                            height: newPos
    		                        }, "slow", function() {
    		                            $('#' + target).fadeIn();
    		                        });
    		                    });
    		                }
    		            }
    
    		            curLoaded = target;
    
    		            return false;
    		        });
    
    		    });
    
    
    
    		});
    		
    		</script>
    
    		<style>
    
    		#contentContainer {       
    		 background: gray;   
    		}
    		#content div {
    		 display:none; 
    		}
    
    
    		
    		</style>
    
    
    
    </head>
    
    <body>
    
    
    	<DIV id=contentContainer>
    	<DIV id=content>
    	<DIV id=slogan>
    	<H2>dream|design|develop</H2></DIV>
    	<DIV id=about>
    	<H2>about</H2></DIV>
    	<DIV id=projects>
    	<H2>personal projects</H2></DIV>
    	<DIV id=portfolio>
    	<H2>portfolio</H2></DIV>
    	<DIV id=contact>
    	<H2>contact</H2></DIV></DIV></DIV>
    	<DIV id=navbar><A href="#portfolio" jQuery16204652370633246184="1">portfolio</A> <A href="#slogan" jQuery16204652370633246184="2">dream|design|develop?</A> <A href="#projects" jQuery16204652370633246184="3">projects</A> <A href="#about" jQuery16204652370633246184="4">about commadelimited</A> <A href="#contact" jQuery16204652370633246184="5">contact</A> </DIV>
    
    
    </body></html>
    Last edited by VIPStephan; 01-13-2012 at 12:32 AM. Reason: wrapped code BB tags

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,609
    Thanks
    6
    Thanked 997 Times in 970 Posts
    Nate, please familiarize yourself with and make use of the small # button above the reply text field. It is a convenient way to insert [CODE][/CODE] tags to post your code inside for better readability.

  • #3
    New Coder
    Join Date
    Oct 2011
    Location
    Utah
    Posts
    37
    Thanks
    19
    Thanked 0 Times in 0 Posts
    I was wondering how to do that. Thanks for the tip!


  •  

    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
    •