HTML:

[Login or Register to remove this advertisement]

Code: 
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,700,400italic,700italic" rel="stylesheet" type="text/css">

<body>
  <div id="content">      
    <h2>Purple Accordion / Checkbox Demo</h2>
    <section class="ac-container">
      <div>
      <input id="about" name="ac" type="checkbox" />
        <label for="about">About Us</label>
        <article class="ac-tall">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi.
          </p>
        </article>
      </div>
        <div>
          <input id="services" name="ac" type="checkbox"/>
          <label for="services">Services</label>
          <article class="ac-tall">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.
          </p>
          </article>
      </div>
      <div>
      <input id="blog" name="ac" type="checkbox"/>
      <label for="blog">Blog</label>
      <article class="ac-grande">
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.<br><br>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.
          </p>
      </article>
    </div>
      <div>
      <input id="portfolio" name="ac" type="checkbox"/>
      <label for="portfolio">Portfolio</label>
      <article class="ac-tall">
            <p>       
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.
          </p>
      </article>
    </div>
      <div>
      <input id="contact" name="ac" type="checkbox"/>
      <label for="contact">Contact</label>
      <article class="ac-short">
            <p> 
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada.
          </p>
      </article>
    </div>
    <div><!--...--></div>
    </section>
  </div>    
</body>
CSS:

Code: 
/* Define colors and fonts */
@white: #ffffff;
@light-purple: #ECE2F7;
@dark-purple: #6C317D;
@open-sans: 'Open Sans', Helvetica, Arial, Verdana, sans-serif;

/**
 * SET COLORS AND FONTS
 */
@border-color: @white;
@label-font: @open-sans;
@label-color: @light-purple;
@label-color-hover: @dark-purple;
@label-background: @dark-purple;
@label-background-hover: @light-purple;
@label-size: 19px;
@content-font: @open-sans;
@content-color: @dark-purple;
@content-background: @white;
@content-size: 19px;

/**
* IGNORE: just centering and font pretty-ing
*/
body { font-family: @open-sans; font-weight: 200; } 
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, input, section { font-weight: 200; } 
#content { width: 600px; position: relative; height: 100%; padding: 10px 10px 10px 10px; }

/**
 * Define Accordion outside elements 
 *
*/
.ac-container {
	width: 100%;
  overflow: hidden;
	margin: 10px auto 10px auto;
  color: @content-color;
  background: transparent;
  padding: 0px;
	text-align: left;
}
.ac-container label{ 
  font-famimly: @label-font;
  overflow: hidden; 
  color: @label-color; 
  cursor: pointer; 
  background: @label-background; 
  margin:6px 0px 0px 0px; 
	padding: 5px 20px;
	position: relative;
	z-index: 20;
	display: block;
	height: 30px ;
  line-height: 33px ;
	font-size: @label-size;
}
.ac-container label:hover{
	background: @label-background-hover;
  color: @label-color-hover;
}
.ac-container input:checked + label,
.ac-container input:checked + label:hover{
	background: @label-background-hover;
	color: @label-color-hover;
  margin: 6px 0px 0px 0px;
  font-size: 19px;
  padding: 5px 20px;
}
.ac-container label:hover:after,
.ac-container input:checked + label:hover:after{
	content: '';
	position: absolute;
	width: 24px;
	height: 24px;
	right: 13px;
	top: 7px;
	background: transparent url(http://tympanus.net/Tutorials/CSS3Accordion/images/arrow_down.png) no-repeat center center;	
}
.ac-container input:checked + label:hover:after{
	background-image: url(http://tympanus.net/Tutorials/CSS3Accordion/images/arrow_up.png);
}
.ac-container input{
	display: none;
}
.ac-container article{
	background: @content-background;
	overflow: hidden;

	height: 0px;
	position: relative;

	-webkit-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-moz-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-o-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	-ms-transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
	transition: height 0.3s ease-in-out, box-shadow 0.6s linear;
}
.ac-container article p{
  margin: 3px;
  padding: 10px;
	display: block;
}
.ac-container input:checked ~ article{
	-webkit-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-moz-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-o-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	-ms-transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
	transition: height 0.5s ease-in-out, box-shadow 0.1s linear;
}
.ac-container input:checked ~ article.ac-short{
	height: 140px;
}
.ac-container input:checked ~ article.ac-tall{
	height: 250px;
}
.ac-container input:checked ~ article.ac-grande{
	height: 500px;
}
Xcode Reviewed by Xcode on . Purple Accordion + Checkbox Demo HTML: <link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,700,400italic,700italic" rel="stylesheet" type="text/css"> <body> <div id="content"> <h2>Purple Accordion / Checkbox Demo</h2> <section class="ac-container"> <div> <input id="about" name="ac" type="checkbox" /> Rating: 5