accordion.css

#accordion {
	margin:0 auto;
	width:400px;}

ul {
	margin:0;
	padding:0;
	}

ul li {
	list-style:none;
	border:1px 1px 1px 1px #efefef solid;
	background-color:#34495e;
	}
	
ul li h2 {
	margin:0;
	padding:10px;
	font-size:18px;
	font-family:Arial, Helvetica, sans-serif;
	color:#ecf0f1;
	border-bottom:1px #efefef solid;
	}	
	
ul li a {
	text-decoration:none;
	}	
	
ul li .content {
    	height: 0;
	overflow:hidden;
	}	
	
ul li .content:target {
	 height:auto;
	border-bottom:1px #efefef solid;
	}
	
	
ul li .content p {
	padding:10px;
	color:#ecf0f1;
	}		

accordion.html

<ul id="accordion">
    <li>
    	<a href="#tab1"><h2>Box One</h2></a>
        <section id="tab1" class="content">
        <p>Content for Box One</p>
        </section>
    </li>
    <li>
    	<a href="#tab2"><h2>Box Two</h2></a>
        <section id="tab2" class="content">
        <p>Content for Box Two</p>
        </section>
    </li>
    <li>
    	<a href="#tab3"><h2>Box Three</h2></a>
        <section id="tab3" class="content">
        <p>Content for Box Three</p>
        </section>
    </li>
</ul>