While displaying a Single panel using expand and collapse effects from the list of panels we generally prefer to use Accordion. In a web application Accordion helps to display large number of contents in less area. There are many ways to create an Accordion. I noticed many developers uses scripting languages to design an accordion. I can say this is a bad practice. Whether Server resource or Client resource we prefer to use as less as possible. The advantages of Pure CSS Accordion is it takes less time to load and easily Configurable.
Here in this demo app I am using pure CSS with HTML5 to prepare a Easily Customizable Responsive Accordion. This is completely responsive and cross-browser compatible. You can use this by simply coping the below files.
Pure-CSS-Accordion.htm
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Pure CSS Accordion Example</title> <link rel="stylesheet" href="master.css" /> </head> <body> <div id="basePanel"> <div class="accordion"> <div id="panel-1"> <a href="#panel-1" class="panel">NETWORK LAYER</a> <div class="expandable"> Network layer forms the third layer from top in the TCP/IP model. It does the functionality of transferring packets between networks. Internet protocol (IP) is an example of network layer protocol. IP performs the basic task of sending packets of data from source to target. </div> </div> <div id="panel-2"> <a href="#panel-2" class="panel">DATA LINK LAYER</a> <div class="expandable"> The data link layer is the second layer. This layer has the functionality of adding the header information to the packet and also to transfer packets to the physical layer. The layer where packets are intercepted and sent over a virtual private network. </div> </div> <div id="panel-3"> <a href="#panel-3" class="panel">PHYSICAL LAYER</a> <div class="expandable"> The first layer in TCP/IP model is Physical layer. It is accountable for encoding and spread of data through network communications media. It sends the data in the form of bits from the Physical layer of the source device and is received at the destination device. It also contains many hardware-related network design issues. For example, LAN, WAN and wireless technology. </div> </div> </div> </div> </body> </html>
master.css
.accordion { width: 100%; }
.accordion .panel { display: block; height: 35px; padding-left: 20px; font: bold 14px/35px Arial, Verdana; text-decoration: none; color: #eee; background: #66BECA; }
.accordion .panel:hover,.accordion div:target .panel { color: #2b3b06; }
.accordion div .expandable { display: none; margin: 8px 5px 5px 20px; font-family: Arial, Verdana; font-size: 15px; }
.accordion div:target .expandable { display: block; }
.accordion > div { height: 40px; overflow: hidden; -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.accordion > div:target { height: 200px; background: #E3E6E6; margin-bottom: 5px; }
