One incredible thing about CSS is the capacity to make extraordinary searching plans for your sites and with CSS3 you can compose code that does not require javascript (as long as you have the latest web browsers!). This following example demonstrate to you best practices to plan a CSS Accordion without the need of javascript, in spite of the fact that you can even now show signs of improvement activities with javascript, this CSS Accordion could in any case make an incredible expansion to your site outline.
So what is a CSS Accordion? Simply a css accordion gives the web client a container with a scope of points or headings, once the client taps on a theme a case will show underneath the header with additional data.
HTML :
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>CSS Accordion</h1>
<div class="accordion">
<ul>
<li class="accordian-heading" id="accordian1">
<a href="#accordian1">Accordian 1</a>
<div class="acc-content">
<p>Content goes here .......</p>
</div>
</li>
<li class="accordian-heading" id="accordian2">
<a href="#accordian2">Accordian 2</a>
<div class="acc-content">
<p>Content goes here ....... </p>
</div>
</li>
<li class="accordian-heading" id="accordian3">
<a href="#accordian3">Accordian 3</a>
<div class="acc-content">
<p>Content goes here ....... </p>
</div>
</li>
</ul>
</div>
</body>
</html>
CSS :
* {
padding:0;margin:0;border:none;list-style-type:none;
}
.accordion {
width:250px;
margin:20px;
font: 12px Verdana, Geneva, sans-serif;
border:1px solid #ccc;
border-radius:5px;
}
.accordion .acc-content {
height: 0;
overflow: hidden;
}
.accordion li:target .acc-content {
height: auto;
padding:10px;
}
.accordion .accordian-heading a {
display:block;
padding:5px;
text-decoration: none;
color: #666;
text-shadow:1px 1px 1px #fff;
font-weight:bold;
border-bottom:1px solid #aaa;
background:#eee;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#ccc));
background:-moz-linear-gradient(#eee, #ccc);
background:-o-linear-gradient(#eee, #ccc);
background:-ms-linear-gradient(#eee, #ccc);
background:linear-gradient(#eee, #ccc);
-webkit-transition:.5s;
-moz-transition:.5s;
-o-transition:.5s;
-ms-transition:.5s;
transition:.5s;
}
.accordion .accordian-heading a:hover {
text-decoration:none;
border-bottom:1px solid #ddd;
background:#eee;
background:-webkit-gradient(linear, 0 0, 0 100%, from(#eee), to(#ddd));
background:-moz-linear-gradient(#eee, #ddd);
background:-o-linear-gradient(#eee, #ddd);
background:-ms-linear-gradient(#eee, #ddd);
background:linear-gradient(#eee, #ddd);
padding-left:15px;
}
0 Comment(s)