css accordion basics

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

  • Example one
    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.
  • Example two
    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.
  • Example three
    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.

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

Basics Found Here

Demo

Other Items in css
Page Views

This page has been viewed 197 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹