www.webdeveloper.com
Results 1 to 2 of 2

Thread: Getting stuck on making a tabbed accordian

  1. #1
    Join Date
    Sep 2012
    Posts
    9

    Getting stuck on making a tabbed accordian

    Hi
    I have been attempting to make a two tabs menu that when clicked slides up and then slides down when clicked again. My example is the menu used on www.hunterandsand.com and my running code can be seen on www.musidoraland.co.uk. I have ground to a halt with my coding which I just can't manage to make work. Any help would be extremely helpful and thank you in advance.

    HTML:
    HTML Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <meta name="description" content="Beauchamp's Corporate offers a unique service for clients wishing to design a special product for their business.">
    <title>Beauchamp's Corporate</title>
    
    <link rel="stylesheet" href="css/style.css" type="text/css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
    <script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('#maximage').cycle({
    		fx: 'scrollHorz', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
    		speed: 1000,
    		timeout: 7000,
            prev: '#arrow_left',
            next: '#arrow_right'
    	});
    	$(function() {
    	    $('.page').hide();
    	    $('#menu li').click(
    	        function() {
    	            
    	            var content_id = $(this).attr('id');
    	            
    	            $('#menu li').addClass('off');
    	            $(this).removeClass('off');
    	            
    	            if ($('.page').is(':visible')) 
    	            {
    	                $('.page').hide();
    	                $('.'+content_id).show();
    	            }
    	            else
    	            {
    	                $('#pages').animate({ height: '300px', easing: 'easeInOutQuart' });
    
            	            //console.log($(this).attr('id'));
            	        $('.'+content_id).show();
    	            }
    	            
    	            
    	           
    	        });
    	});
    });
    </script>
    <body>
            
    <div id="logo"><img src="images/logo1.jpg" alt="Beauchamp's Corporate"></div>
            
            <div id="cycle-loader">
             </div>   
    		
            <div id="maximage">
                <img src="images/boat1.jpg" alt="" />
                <img src="images/car1.jpg" alt="" />
                <img src="images/dock1.jpg" alt="" />
                <img src="images/glass1.jpg" alt="" />
                <img src="images/hotel1.jpg" alt="" />   
                <img src="images/table1.jpg" alt="" />         
            </div>
    		
    	    <a href="" id="arrow_left" class="button" title="Previous Photo"></a>
            
            <a href="" id="arrow_right" class="button" title="Next Photo"></a>  
    
    <div id="pages">
                
                <div id="nav">
                    
                    <ul id="menu">
                        <li id="services">Our Product</li>
                        <li id="contact">Contact Us</li>
                    </ul>
                
                </div>
                
                <div id="content">
                    
                    <div id="copy">
                        
                        <div class="page product">
    
                            <p>We offer a consultation meeting in which we discuss client requirements, design ideas, packaging options, budgets, lead times and more...
    							<br />
                            We have a number of designs already in production which we can edit & brand with the client logo or...
    							<br />
                            Following this initial meeting, we produce product drawings, quotes, source leather samples and materials specific to this product. Samples can be produced once drawings have been approved by the client.
    							<br />
                            Lead times, delivery schedules and product prices are unique to the client and indervidually calculated according to the specific client reqirements.
    							<br />
                            Where possible Beauchamp's aims to produce products in one of our UK factories however should it be required we will use factories further afield. </p>
                                                    
                        </div>
                        
                        <div class="page contact">
                        
                            
                            <p>For further information:
    							<br />
    						Email: <a href="info@beauchampsoflondon.com">info@beauchampsoflondon.com</a>
    							<br />
    						Address: 35 Bruton Street, London, W1J 6QY 
    							<br />
    						Website: <a href="www.beauchampscorporate.com">www.beauchampscorporate.com</a>
    							<br />
    						Fashion Accessories Website: <a href="www.beauchampsoflondon.com">www.beauchampsoflondon.com</a></p>
                            
                        </div>
                        
                    </div>
                    
                </div>
                
                
            </div>		
    
    </body>
    </html>
    CSS:
    Code:
    #logo{
    width:180px;
    height:113px;
    margin-left:auto;
    margin-right:auto;
    margin-top:-10px;
    }
    
    a.button {
        display:block;
        width:50px;
        height:50px;
        margin-top:200px;
    	opacity: 0.6%;
    	}
    
    a#arrow_left{
        float:left;
        background: transparent url('../images/arrowleft1.jpg') no-repeat;
    	position: relative;
    	z-index: 100;
    }
    
    a#arrow_right{
        float:right;
        background: transparent url('../images/arrowright1.jpg') no-repeat;
    	position: relative;
    	z-index: 100;
    }
    
    #maximage { 
    height: 100%; 
    width: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -5000; 
     }
    #maximage img {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: -5000;	
    }
    #pages {
        margin:0 auto;
        width:100%;
        bottom:0;
        position:fixed;
        text-align:center;
        height:40px;
    }
    
    #pages #content {
        background: transparent url(/images/tran.png) repeat;
        padding:40px 0 120px 0;
    }
    
    #copy {
        width:368px;
        margin:0 auto;
        overflow:hidden;
    }
    p, li {
        text-align:left;
        font-family:'Buenard', serif;
        font-size:14px;
        line-height:18px;
        color:#333;
        margin:0 0 20px 0;
    }
    
    li {
        margin:0;
        padding:5px 59px 7px 58px;
    }
    #nav {
        margin:10px auto 0 auto;
        width:912px;
        padding:;
        text-align:center;
        overflow:hidden;
    }
    #menu {
        clear:both;
        width:369px;
        margin:0 auto;
    }
    
    #menu li {
        float:left;
        width:auto;
        background: transparent url(/images/tran.png) repeat;
        margin-right:1px;
        cursor:pointer;
    }
    
    #menu li#contact {
        margin:0;
    }
    
    #menu li.off {
        background: transparent url(/images/tran_black.png) repeat;
        color:#fff;
    }
    #nav {
        width:368px;
    }
    
    #nav .circle {
        float:left;
        
    }
    
    #nav .left{
        margin-right:10px;
    }
    
    #nav .right{
        margin-left:10px;
    }
    
    #nav .down a {
        margin:0 auto 20px auto;
        display:block;
        height:31px;
        width:30px;
    }

  2. #2
    Join Date
    Sep 2012
    Posts
    9
    I have now made this work, found out why it wasn't working and sorted it.

Thread Information

Users Browsing this Thread

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

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
  •  
HTML5 Development Center



Recent Articles