DZone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
Refcards Trend Reports Events Over 2 million developers have joined DZone. Join Today! Thanks for visiting DZone today,
Edit Profile Manage Email Subscriptions Moderation Admin Console How to Post to DZone Article Submission Guidelines
View Profile
Sign Out
Refcards
Trend Reports
Events
Zones
Culture and Methodologies Agile Career Development Methodologies Team Management
Data Engineering AI/ML Big Data Data Databases IoT
Software Design and Architecture Cloud Architecture Containers Integration Microservices Performance Security
Coding Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
Culture and Methodologies
Agile Career Development Methodologies Team Management
Data Engineering
AI/ML Big Data Data Databases IoT
Software Design and Architecture
Cloud Architecture Containers Integration Microservices Performance Security
Coding
Frameworks Java JavaScript Languages Tools
Testing, Deployment, and Maintenance
Deployment DevOps and CI/CD Maintenance Monitoring and Observability Testing, Tools, and Frameworks
  1. DZone
  2. Coding
  3. Frameworks
  4. How to Turn jQuery Accordion into CSS3 Accordion

How to Turn jQuery Accordion into CSS3 Accordion

Andrey Prikaznov user avatar by
Andrey Prikaznov
·
Oct. 04, 12 · Interview
Like (0)
Save
Tweet
Share
5.55K Views

Join the DZone community and get the full member experience.

Join For Free

Have you ever used ordinary accordion plugins in your projects? I would believe so! Most of them use javascript to work (or jQuery). Usually we use such plugins (accordions) to build a promo with images, a little photo gallery, or in case we have to build an advertisement with a list of product features. We did some research and came to the conclusion that sometimes we don’t need to use any script in order to build accordions. We can just use the power of CSS3. We can handle the OnClick event and use custom animation.

download sources

I prepared three versions with accordions. For the first demonstration we use jQuery to build an accordion. I selected liteAccordion jQuery plugin (http://nicolahibbert.com/demo/liteAccordion/) as an accordion plugin for out test purposes. See how it works:

Live Demo

It looks nice, doesn’t it? Let’s review HTML markup of this page:

<!DOCTYPE HTML>
	<html lang="en">
	    <head>
	        <meta charset="utf-8" />
	        <title>How to turn jQuery accordion into pure CSS3 accordion | Script Tutorials</title>
	 
	        <!-- CSS files -->
	        <link href="css/layout.css" rel="stylesheet" />
	        <link href="css/liteaccordion.css" rel="stylesheet" />
	 
	        <!-- jQuery -->
	        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	 
	        <!-- jQuery easing -->
	        <script src="js/jquery.easing.1.3.js"></script>
	 
	        <!-- liteAccordion jQuery library -->
	        <script src="js/liteaccordion.jquery.js"></script>
	 
	        <script>
	            $(document).ready(function(){
	                $('#js_version').liteAccordion({
	                    theme : 'dark',
	                    rounded : true,
	                    enumerateSlides : true,
	                    firstSlide : 1,
	                    linkable : true,
	                    easing: 'easeInOutSine'
	                });
	            });
	        </script>
	    </head>
	    <body>
	 
	        <h1>jQuery accordion (liteAccordion) version</h1>
	        <div id="js_version" class="accordion">
	            <ol>
	                <li data-slide-name="slide1">
	                    <h2><span>Slide One</span></h2>
	                    <div>
	                        <img src="images/1.jpg" alt="Slide One" />
	                    </div>
	                </li>
	                <li data-slide-name="slide2">
	                    <h2><span>Slide Two</span></h2>
	                    <div>
	                        <img src="images/2.jpg" alt="Slide Two" />
	                    </div>
	                </li>
	                <li data-slide-name="slide3">
	                    <h2><span>Slide Three</span></h2>
	                    <div>
	                        <img src="images/3.jpg" alt="Slide Three" />
	                    </div>
	                </li>
	                <li data-slide-name="slide4">
	                    <h2><span>Slide Four</span></h2>
	                    <div>
	                        <img src="images/4.jpg" width="768" alt="Slide Four" />
	                    </div>
	                </li>
	                <li data-slide-name="slide5">
	                    <h2><span>Slide Five</span></h2>
	                    <div>
	                        <img src="images/5.jpg" alt="Slide Five" />
	                    </div>
	                </li>
	            </ol>
	            <noscript>
	                <p>Please enable JavaScript to get the full experience.</p>
	            </noscript>
	        </div>
	 
	    </body>
	</html>

In the header we added all the necessary libraries and styles (jQuery, jquery.easing and liteAccordion library) as well as accordion initialization code. In the body section we can see basic accordion structure (OL-LI list) with slides. I think that this is one of usual structures for accordions.

Now, I think that it is the very time to start turning it into pure CSS3 accordion. In the beginning we have to remove all JS scripts from our page, we can remove liteaccordion.css as well. We are going to prepare our own CSS styles. Also, we have to add <A> links to the headers of our slides (because we should be able to switch between slides). In the result we should get something like this:

	<!DOCTYPE HTML>
	<html lang="en">
	    <head>
	        <meta charset="utf-8" />
	 
	        <!-- CSS files -->
	        <link href="css/layout.css" rel="stylesheet" />
	        <link href="css/main.css" rel="stylesheet" />
	    </head>
	    <body>
	 
	        <h1>Pure CSS3 accordion version without animation</h1>
	        <div class="accordion css3accordion">
	            <span id="slide1"></span>
	            <span id="slide2"></span>
	            <span id="slide3"></span>
	            <span id="slide4"></span>
	            <span id="slide5"></span>
	            <ol>
	                <li class="slide1">
	                    <a href="#slide1"><h2><span>Slide One</span></h2></a>
	                    <div>
	                        <img src="images/1.jpg" alt="Slide One" />
	                    </div>
	                </li>
	                <li class="slide2">
	                    <a href="#slide2"><h2><span>Slide Two</span></h2></a>
	                    <div>
	                        <img src="images/2.jpg" alt="Slide Two" />
	                    </div>
	                </li>
	                <li class="slide3">
	                    <a href="#slide3"><h2><span>Slide Three</span></h2></a>
	                    <div>
	                        <img src="images/3.jpg" alt="Slide Three" />
	                    </div>
	                </li>
	                <li class="slide4">
	                    <a href="#slide4"><h2><span>Slide Four</span></h2></a>
	                    <div>
	                        <img src="images/4.jpg" alt="Slide Four" />
	                    </div>
	                </li>
	                <li class="slide5">
	                    <a href="#slide5"><h2><span>Slide Five</span></h2></a>
	                    <div>
	                        <img src="images/5.jpg" alt="Slide Five" />
	                    </div>
	                </li>
	            </ol>
	        </div>
	 
	    </body>
	</html>

As you can see, I added several <span> objects. By default all of them are hidden, but we have to use them in order to handle onclick events. Now, we are ready to start writing own styles for our CSS3 accordion. Firstly, we have to define styles for our parent object and inner spans:

/* CSS3 accordion */
.css3accordion {
    border: 9px solid #353535;
    border-radius: 6px;
    padding: 5px 5px 6px 0;
    background: #030303;
    height: 320px;
    width: 960px;

    /* CSS3 shadows */
    -webkit-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5);
    -ms-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5);
    box-shadow: 0 -1px 0 #555 inset, 0 5px 15px rgba(0, 0, 0, 0.5);
}

/* hide first level spans */
.css3accordion > span {
    display: none
}

As I said – they are hidden. Now we can define styles for our slides and headers:

/* main accordion styles and slides */
.css3accordion ol {
    height: 100%;
    list-style: none;
    overflow: hidden;
    position: relative;
}
.css3accordion li {
    float: left;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 48px;

    /* CSS3 transition for slides */
    -webkit-transition: all 0.9s ease-in-out;
    -moz-transition: all 0.9s ease-in-out;
    -ms-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}

.css3accordion li a {
    display: block;
    float: left;
    height: 320px;
    position: relative;
    width: 48px;
}

/* slide headers */
.css3accordion  h2 {
    font-size: 16px;
    font-weight: normal;
    height: 48px;
    left: 0;
    line-height: 265%;
    margin: 0;
    position: absolute;
    top: 0;
    width: 320px;
    z-index: 1;

    -webkit-backface-visibility: hidden;
    -webkit-transform: translateX(-100%) rotate(-90deg);
    -webkit-transform-origin: right top;
    -moz-transform: translateX(-100%) rotate(-90deg);
    -moz-transform-origin: right top;
    -ms-transform: translateX(-100%) rotate(-90deg);
    -ms-transform-origin: right top;
    -o-transform: translateX(-100%) rotate(-90deg);
    -o-transform-origin: right top;
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: right top;
}
.css3accordion h2 span {
    background-color: #353535;
    border-radius: 4px;
    color: #fff;
    display: block;
    margin-top: 5px;
    padding-right: 10%;
    text-align: right;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}
.css3accordion h2 span:hover {
    background-color: #353535;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
    background: -webkit-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -moz-linear-gradient(left,  #353535 0%, #555555 100%);
    background: -ms-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -o-linear-gradient(left,  #353535 0%,#555555 100%);
    background: linear-gradient(left,  #353535 0%,#555555 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
}
/* inner slide content */
.css3accordion li div {
    margin-left: 5px;
    padding-left: 48px;
}

Now I’d like to show you how to display a counter object in every header. I’m going to use :after pseudo element. I hope that you know that :after selector inserts content after the selected element, so we can do something like this:

/* 'counter' object */
.css3accordion h2 span:after {
    color: #080808;
    font-weight: bold;
    left: 10%;
    position: absolute;
    text-shadow: -1px 1px 0 #555555;
    top: 10%;

    /* CSS3 rotate for 'counter' */
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
/* 'counter' values */
li.slide1  h2 span:after {
    content: "1";
}
li.slide2  h2 span:after {
    content: "2";
}
li.slide3  h2 span:after {
    content: "3";
}
li.slide4  h2 span:after {
    content: "4";
}
li.slide5  h2 span:after {
    content: "5";
}

Finally, in order to complete our accordion we have to implement onclick behavior:

/* onclick behavior */
#slide1:target ~ ol li.slide1,
#slide2:target ~ ol li.slide2,
#slide3:target ~ ol li.slide3,
#slide4:target ~ ol li.slide4,
#slide5:target ~ ol li.slide5 {
    width: 768px;
}
#slide1:target ~ ol li.slide1 span,
#slide2:target ~ ol li.slide2 span,
#slide3:target ~ ol li.slide3 span,
#slide4:target ~ ol li.slide4 span,
#slide5:target ~ ol li.slide5 span {
    background: #353535;
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,#353535), color-stop(100%,#555555));
    background: -webkit-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -moz-linear-gradient(left,  #353535 0%, #555555 100%);
    background: -ms-linear-gradient(left,  #353535 0%,#555555 100%);
    background: -o-linear-gradient(left,  #353535 0%,#555555 100%);
    background: linear-gradient(left,  #353535 0%,#555555 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#353535', endColorstr='#555555',GradientType=1 );
}

That’s all, our own CSS3-based accordion is complete! You can check it in action:

CSS3 accordion demo

But that’s not all for today, as a bonus, I prepared a third demo for you with an animated accordion.

animated accordion demo

In order to do it I recommend disable onclick behavior, and apply new animation:

/* auto animation */
.css3accordion li {
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 25.0s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 25.0s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

.css3accordion li:nth-child(2) {
    -webkit-animation-delay: 5.0s;
    -moz-animation-delay: 5.0s;
}
.css3accordion li:nth-child(3) {
    -webkit-animation-delay: 10.0s;
    -moz-animation-delay: 10.0s;
}
.css3accordion li:nth-child(4) {
    -webkit-animation-delay: 15.0s;
    -moz-animation-delay: 15.0s;
}

.css3accordion li:nth-child(5) {
    -webkit-animation-delay: 20.0s;
    -moz-animation-delay: 20.0s;
}

@-webkit-keyframes anim_slides {
    0% {
        width: 48px;
    }
    20% {
        width: 768px;
    }
    40% {
        width: 48px;
    }
    100% {
        width: 48px;
    }
}
@-moz-keyframes anim_slides {
    0% {
        width: 48px;
    }
    20% {
        width: 768px;
    }
    40% {
        width: 48px;
    }
    100% {
        width: 48px;
    }
}

Conclusion

Now that is all for today. We have just created three different demos: the first one with jQuery, the second and the third – with pure CSS3. I hope that you like it. Good luck!

 

 

 

CSS JQuery

Published at DZone with permission of Andrey Prikaznov, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • SAST: How Code Analysis Tools Look for Security Flaws
  • Streamlining Your Workflow With the Jenkins HTTP Request Plugin: A Guide to Replacing CURL in Scripts
  • A Simple Union Between .NET Core and Python
  • Cloud-Native Application Networking

Comments

Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends: