Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Create Horizontal Accordion Using CSS3 and HTML

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 401
    Comment on it

    It is a simple horizontal accordion built in CSS3 and HTML. Copy CSS3 code and paste it between style tag.

    CSS

    body, button, input, select, textarea { font-family: sans-serif;}
    
    /*Define Accordion box*/
    .accordion { width:830px; overflow:hidden; margin:0px auto; color:#fff; background:#212121; padding:0px; }
    
    /*General Accordion****************************************************************************/
    /*Set style of open slide*/
    .accordion section:target { background:#FFF; padding:10px;}
    .accordion section:target:hover { background:#FFF; }
    .accordion section:target h2 {width:100%;}
    .accordion section:target h2 a{ color:#333; padding:0;}
    .accordion section:target p {display:block;}
    .accordion section h2 a{padding:8px 15px;display:block; font-size:16px; font-weight:normal;color:#eee; text-decoration:none; }
    
    /*set style of closed slide*/
    .accordion section{ float:left;    overflow:hidden; color:#333; cursor:pointer; background: #333; margin:3px; }
    .accordion section:hover {background:#444;}
    .accordion section p { display:none; }
    .accordion section:after{position:relative;font-size:24px;color:#000;font-weight:bold;}
    /*End General Accordion****************************************************************************/
    
    /*Horizontal Accordion *********************************************************************/
    .horizontal section{ width:5%; height:250px; 
        -moz-transition:width 0.2s ease-out; 
        -webkit-transition:width 0.2s ease-out;
          -o-transition:width 0.2s ease-out;
        -ms-transition:width 0.2s ease-out;
          transition:width 0.2s ease-out;
    }
    
    /*Position the number of the slide*/
    .horizontal section:after{top:140px;left:15px;}
    
    /*Header of closed slide*/
    .horizontal section h2 { 
        -webkit-transform:rotate(90deg);
        -moz-transform:rotate(90deg);
        -o-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        width:240px; position:relative; left:-100px; top:85px;
    } 
    
    /*On mouse over open slide*/
    .horizontal :target{ width:73%;height:230px; }
    .horizontal :target h2{ top:-15px;left:0;
        -webkit-transform:rotate(0deg);
        -moz-transform:rotate(0deg);
        -o-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg); 
    }
    /*End Horizontal Accordion *********************************************************************/
    

    HTML

    <html>
        <head>
            <style>
                //Paste above CSS3 code here.
            </style>
        </head>
        <body>
            <div class="accordion horizontal">
                <section id="about">
                    <h2><a href="#about">About Us</a></h2>
                    <p>Evon Technotogies</p><p>(Spearheadind Innovation)</p>
                </section>
                <section id="services">
                    <h2><a href="#services">Services</a></h2>
                    <p>Evon Technotogies</p><p>(Spearheadind Innovation)</p>
                </section>
                <section id="blog">
                    <h2><a href="#blog">Blog</a></h2>
                    <p>Evon Technotogies</p><p>(Spearheadind Innovation)</p>
                </section>
                <section id="portfolio">
                    <h2><a href="#portfolio">Portfolio</a></h2>
                    <p>Evon Technotogies</p><p>(Spearheadind Innovation) </p>
                </section>
                <section id="contact">
                    <h2><a href="#contact">Contact</a></h2>
                     <p>Evon Technotogies</p><p>(Spearheadind Innovation)</p>
                </section>
            </div>
        </body>
    </html>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: