can we create an accordion with out using jquery ui?

I think yes, it will be basic but also keeping it simple it probably a good idea.

tried adding transitions to make the divs showing a bit smoother, but it does not apply.

its kind of annoying how it scrolls the page to the anchor, but i think i can live with it.

demo

code

<style>
#accordion {
}
#accordion ul {
	list-style:none;
	margin:0;
	padding:0;
}
.accordion {
	display:none;
}
.accordion:target {
	display:block;
}
#accordion ul li a {
	text-decoration:none;
	display:block;
	padding:10px;
}
.accordion {
	padding: 4px;
}	

/* Some colours */
#accordion ul{
    box-shadow:0 4px 10px #BDBDBD;
    border-radius:5px;
}
#accordion ul li a{
	background:#fff;
	border-bottom:1px solid #E0E0E0;
	color:#999;
}
.accordion{
	background:#fdfdfd;
	color:#999;
}
.accordion:target{
	border-top:3px solid #FFCDCD;
}

</style>

<div id="accordion">
  <ul>
    <li>
      <a href="#one" onclick='return:false;'>Example one</a>
      <div id="one" class="accordion">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
      </div>
    </li>
    <li>
      <a href="#two">Example two</a>
      <div id="two" class="accordion">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
      </div>
    </li>    
    <li>
      <a href="#three">Example three</a>
      <div id="three" class="accordion">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet in laborum praesentium esse aliquam molestiae animi non facilis perspiciatis corporis ad molestias quo harum suscipit ipsum incidunt ea voluptates accusantium.
      </div>
    </li>
  </ul>
</div>

links