Pure HTML5 CSS3 Accordion

9,514 views

Pure HTML5 - CSS3 Accordion

Live Demo

Here is one of the nice and pure HTML5 and CSS3 example out of huge feature list.. You can see here this accordion done by using only HTML5 and CSS3 and NO JAVASCRIPT or JQUERY. Feel free to use my code for your project or practice.

If you like this article please rate and share it.

Here is the full code for HTML5 CSS3 accordion. You can also download zip file from bottom.

HTML Code:

<!DOCTYPE html>
<html>
<head>
	<!-- Created by Jatin Soni - Pixel and Grain (URL: http:portfolio.pixelngrain.com -->
	<title>Accordion Example</title>
	<meta name="description" content="" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="style.css" />
	<script src="js/jquery.min.js"></script>
	<script>document.createElement('section');</script>
	<!--[if lt IE 9]>
		<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>
<body>

	<div id="heading">
		<h2>{Accordion Example}</h2>
	</div>

	<div class="accordion">
		<section id="1">
			<h2><a href="#1">Nikon D2H</a></h2>

			<div>
				<img src="http://photocrati.com/wp-content/uploads/2009/03/nikon-d2h.jpg" alt="pic" width="120" height="120">

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel lacus ac eros auctor imperdiet a eleifend erat. Cras non augue nisl. Cras dapibus, diam eu dictum aliquet, nisi urna facilisis odio, non euismod turpis enim quis lectus. Nulla porta malesuada placerat. Pellentesque eleifend tellus sed odio condimentum lacinia. Curabitur sit amet lectus purus. Vestibulum malesuada, ligula quis imperdiet porta, dolor turpis fringilla enim, a cursus ante odio vitae diam. Vestibulum a elit massa, sed dignissim metus. Phasellus id odio eu leo sollicitudin tincidunt. Aliquam erat volutpat. Duis faucibus mauris interdum leo euismod vel ornare felis blandit. Cras elementum tellus id justo vestibulum tincidunt porttitor metus imperdiet. Praesent non nisl metus. Nam at sem nibh, non porta libero. Curabitur dapibus luctus imperdiet. Aenean at pretium urna.</p>

				<h4 class="readmore"><a href="#">Read more</a></h4>
			</div>
		</section>

		<section id="2">
			<h2><a href="#2">Canon DSLR</a></h2>

			<div>
				<img src="http://www.dosprimaseventives.com/images/dgcam2.jpg" width="120" height="120" alt="pic">

				<p>Mauris volutpat elementum tellus a pulvinar. Suspendisse iaculis, enim ac sodales vehicula, ante sapien malesuada magna, et scelerisque magna erat a velit. Nulla venenatis ultrices felis ut blandit. Aliquam pulvinar sagittis magna, eget pellentesque dui placerat eget. In at dolor quis quam vehicula consequat. Praesent quis diam ut lorem hendrerit varius molestie eu risus. Quisque sed ante sit amet augue congue pulvinar ut iaculis nibh. Duis tristique nulla vitae nulla varius fermentum. Nunc turpis metus, adipiscing eget accumsan vitae, pharetra nec sapien. Suspendisse pharetra risus vel risus commodo ut pellentesque sem tempus. Fusce faucibus pulvinar sapien, a varius nibh bibendum in.</p>

				<h4 class="readmore"><a href="#">Read more</a></h4>
			</div>
		</section>

		<section id="3">
			<h2><a href="#3">Nikon 28-105 Lens</a></h2>

			<div>
				<img src="http://3.bp.blogspot.com/_1s_DzXqmv_Y/Sl8i93cqG6I/AAAAAAAAABI/lHbomAypnhQ/s1600/nikon28-105.jpg" alt="pic" width="120" height="120">

				<p>Proin quam libero, gravida a aliquam quis, viverra sit amet ligula. Cras tellus neque, convallis at aliquam at, consequat ac nisl. Nunc quis condimentum nisl. Maecenas feugiat, enim non rutrum tincidunt, lectus felis tincidunt mi, at venenatis dui sapien consequat massa. Nullam tempus, ante in laoreet elementum, neque massa viverra erat, ac lobortis libero lacus nec dolor. Mauris feugiat venenatis turpis, ac vulputate purus mattis ut. Nullam interdum odio nec est laoreet consequat. Fusce suscipit nibh a metus ultrices aliquam. Vestibulum quis augue ligula, quis porttitor sem. Nunc sit amet dictum augue. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed et odio a mauris feugiat interdum. Morbi.</p>

				<h4 class="readmore"><a href="#">Read more</a></h4>
			</div>
		</section>

		<section id="4">
			<h2><a href="#4">Fuji Film - FinePIX</a></h2>

			<div>
				<img src="http://images.digitalcamerainfo.com/images/upload/Fuji-S5100-frontangle.jpg" alt="pic" width="120" height="120">

				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel lacus ac eros auctor imperdiet a eleifend erat. Cras non augue nisl. Cras dapibus, diam eu dictum aliquet, nisi urna facilisis odio, non euismod turpis enim quis lectus. Nulla porta malesuada placerat. Pellentesque eleifend tellus sed odio condimentum lacinia. Curabitur sit amet lectus purus. Vestibulum malesuada,</p>

				<h4 class="readmore"><a href="#">Read more</a></h4>

			</div>
		</section>
	</div>

</body>
</html>

To show high quality image on hover scaling (as my example) use larger image and change width and height in to image tag. So when you scale it will looks high quality.

CSS Code:

body, html{
	padding:0;
	margin:0;
	background:#8b96b0;
}

#heading{
	margin:50px auto 0;
	width:400px;
}

#heading h2{
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	color:#273555;
	text-shadow:1px 1px 0 #a5adc1;
	margin:0;
	paddiing:0;
}

section
{
        display: block;
}

section div{
	position:relative;
}

.accordion
{
        background-color: #F4FAFF;
        border: 1px solid #DDF0FF;
        width: 400px;
        padding: 5px;
        margin: 5px auto;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        -moz-box-shadow: 0 1px 0 #999;
        -webkit-box-shadow: 0 1px 0 #999;
        box-shadow: 0 1px 0 #999;
		opacity:.9;
}

.accordion section
{
        border-bottom: 1px solid #A6C8DB;
        margin: 1px;
		background: #b6c0d6;
		background: -moz-linear-gradient(top, #b6c0d6 0%, #e0e8f9 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b6c0d6), color-stop(100%,#e0e8f9));
		background: -webkit-linear-gradient(top, #b6c0d6 0%,#e0e8f9 100%);
		background: -o-linear-gradient(top, #b6c0d6 0%,#e0e8f9 100%);

        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
}

.accordion h2,
 .accordion p
{
	margin: 0;
}

.accordion h2{
	background: #606c88;
	background: -moz-linear-gradient(top, #606c88 0%, #3f4c6b 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#606c88), color-stop(100%,#3f4c6b));
	background: -webkit-linear-gradient(top, #606c88 0%,#3f4c6b 100%);
	background: -o-linear-gradient(top, #606c88 0%,#3f4c6b 100%);
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	border-radius: 5px;
	position:relative;
}

.accordion img{
	float:left;
	margin:10px;
	border:3px solid #7f8daf;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border-radius:10px;

	-moz-transform: scale(1);
	-moz-transition: all 1s ease-in-out;

	-webkit-transform: scale(1);
	-webkit-transition: all 1s ease-in-out;
	z-index:1;
}

.accordion img:hover, .accordion img:active, .accordion img:focus{
	-moz-transform: scale(2.5) rotate(-5deg);
	-moz-box-shadow:0 0 10px #222;
	-moz-transform-origin: top left;
	-moz-transition: all .2s ease-in-out;

	-webkit-transform: scale(2.5) rotate(-5deg);
	-webkit-box-shadow:0 0 10px #222;
	-webkit-transform-origin: top left;
	-webkit-transition: all .2s ease-in-out;

}

.readmore{
	position:absolute;
	bottom:10px;
	right:10px;
	margin:0;
	padding:0;
	font-size:14px;
	font-family:'Arial', 'Helvetica', 'sans-serif';'
}

.readmore a{
	text-decoration:none;
	color: #e3eeff;
	background:#8692ac;
	padding:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #6b7895;
	-moz-transition: all 2s ease-in-out;
	opacity:.2;
}

.readmore a:hover{
	background:#606c88;
	opacity:1;
	-moz-transition: all .5s ease-in-out;
	-moz-box-shadow:1px 1px 0 #fff;
}

.accordion p
{
        padding: 10px;
		font: 11px/1.5 'Arial', 'Helvetica', 'sans-serif';
		color:#53607d;
}

.accordion h2 a
{
        display: block;
        font: 14px/1 'Arial', 'Helvetica', 'sans-serif';
		font-weight:bold;
        padding: 10px;
        color: #e3eeff;
        text-decoration: none;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;

}

.accordion h2 a:hover
{
		background: #3f4c6b;
		background: -moz-linear-gradient(top, #3f4c6b 0%, #606c88 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#3f4c6b), color-stop(100%,#606c88));
		background: -webkit-linear-gradient(top, #3f4c6b 0%,#606c88 100%);
		background: -o-linear-gradient(top, #3f4c6b 0%,#606c88 100%);
}

.accordion h2 + div
{
        height: 0;
        overflow: hidden;
        -moz-transition: height 0.3s ease-in-out;
        -webkit-transition: height 0.3s ease-in-out;
        -o-transition: height 0.3s ease-in-out;
        transition: height 0.3s ease-in-out;
}

.accordion :target h2 a:after
{
        margin-top: -3px;
        border-top: 5px solid #333;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
}

.accordion :target h2:after{
	content:url(open.png);
	position: absolute;
    right: 10px;
    top: 0;
}

.accordion :target h2 + div
{
        height: 300px;
}
Live Demo

[dm]7[/dm]

Please rate this

1 Star2 Stars3 Stars4 Stars5 Stars (7 votes, average: 4.71 out of 5)
 Loading ... Loading ...
Flower

All material | content of this post is original and copyrighted to Jatin Soni.

http://www.pixelngrain.com/?p=330

19 Responses to “Pure HTML5 CSS3 Accordion”

  1. Andrew says:
    July 14, 2012 at 16:56

    Great article. It works fine for me on Crome and FF. More articles would be appreciated. :-)

    What kind of 3D works do you do? Is it 3D video or more like 3D modeling/graphics? If you want to reply via email to keep these comments clean feel free to do so.

    Thanks!

    Reply
    • Jatin Soni says:
      July 14, 2012 at 17:12

      Glad to hear Andrew,

      I will try to write more tutorials in future.

      What kind of 3D works do you do? Is it 3D video or more like 3D modeling/graphics?

      I work on every part of 3d. I do 3d animation/video, 3d graphics, 3d modeling etc. also work for short films, video editing etc.

      Reply
  2. John says:
    July 11, 2012 at 14:35

    Is it possible so that when the page loads one of the sections is already pre-opened?

    Reply
    • Jatin Soni says:
      July 11, 2012 at 22:15

      To keep open one section on load that required one class which has height value set. In that case you need to use jquery with add remove class.

      Reply
    • sai says:
      November 1, 2012 at 15:34

      http://portfolio.pixelngrain.com/demo/html-css/accordion.html#2

      …html#2 makes section 2 pre-open

      Reply
  3. Anthony says:
    May 21, 2012 at 12:24

    Just wanted to say thanks, it’s a great help. :)

    Reply
  4. Mike says:
    February 18, 2012 at 00:53

    how long have you been coding in html and css, do you know how to write functions in js or jquery? because accordion can be done to support multiple browser versions in javascript. maybe your restrictions are limited to your knowledge.

    Reply
    • Jatin Soni says:
      February 18, 2012 at 08:12

      Mike,

      I am still learning and not master or masters :)

      I am not posting anything to prove my knowledge, skill or year of experience and even I don’t like to jump into any types of argument. Just post what I like about HTML5 and CSS3. I am sorry if you are looking for any js / jquery accordion for your work and my post makes you frustrated.

      This post is to show how how HTML5 and CSS3 can create accordion without using javascript or jquery (if you have read the title ) and not for js/jquery and even for cross browsing. If you don’t find what you was looking for than I am sure you will find millions of post for JAVASCRIPT / JQUERY AND CROSS-BROWSING accordion tutorials on the web.

      This comment section is open to discuss about the post or any difficulty or suggestion but not for any argument such you did. So please avoid such behavior. I am not posting anything to grab any attention but only share what I know. If it is not what you are looking for than just move on. There are millions of blogs waiting for you. So help me to keep this blog keep clean by not posting any argument or such comment. :) . Thanks

      Hope this would be enough for you.

      Reply
  5. Eric says:
    February 8, 2012 at 18:17

    Jatin,
    Thank you for posting such an informative and easy to follow tutorial. You’ve hit on two aspects of the future of web design in a very simple way. Thanks again!
    Eric

    Reply
  6. Antje says:
    January 23, 2012 at 18:44

    great! thank you for the help. I’ll try it and report how it works

    Reply
  7. Antje says:
    January 19, 2012 at 18:45

    hello.
    my name is Antje and I’m from Germany. I’m very impressed … This tutorial is great.
    Unfortunately, I get a lot of error messages output for different browsers (IE 7, Safari 2, Opera 8, Opera 9, Firefox 1.5, Netscape 8)
    Is the reason that html5 is not interpreted by these browsers? is there a possibility, how can I solve it compatible for all browser?

    Reply
    • Jatin Soni says:
      January 19, 2012 at 21:35

      @Antje,

      HTML5 is the reason why the accordion not working with older browser. To see how this accordion works properly check in latest firefox browser.

      This pure html5 css3 accordion only works with latest browsers supporting HTML5 and CSS3. I have checked with my all latest browsers and all works fine without any issue. Only buttons doesn’t animate because I haven’t add transition for all browser which you can activate in all browser by adding them transition class. e.g.

      For read more button I have add the below class
      .readmore a:hover{
      background:#606c88;
      opacity:1;
      -moz-transition: all .5s ease-in-out;
      -moz-box-shadow:1px 1px 0 #fff;
      }

      -moz only will work for mozaila firefox so if you want to add transition for chrome and safari you need to add class with -website and for opera -o

      -moz-transition: all .5s ease-in-out;
      -webkit-transition: all .5s ease-in-out;
      -o-transition: all .5s ease-in-out;

      Do not hesitate to ask me further.

      Reply
  8. Vijay says:
    July 25, 2011 at 16:48

    This is nice tutorial. Thanks for sharing. I was looking for this for my website.

    Reply

Leave a Reply

CAPTCHA Image
*

Anti-Spam Question: