Accordion

Accordion is one of most important button class of CSS. It is most important button class during designing. Accordion plays a vital role when we want to toggle between hiding and showing large amount of content. Accordion allows us to hide content that is not immediately relevant to user. 

Creating an Accordion we have to follow following steps:

Step 1:

<body>
<h2>Accordion</h2>
<button class="accordion" style="background-color:red;">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion" style="background-color:white;">Section 2</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion" style="background-color:green;">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>

Step 2:

<style>
button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
    background-color: #ddd;
}
div.panel {
    padding: 0 18px;
    display: none;
    background-color: white;
}
div.panel.show {
display: block;
}
</style>

Step 3:

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
    acc[i].onclick = function(){
        this.classList.toggle("active");
        this.nextElementSibling.classList.toggle("show");
  }
}
</script>
for live demonstration click here

Comments

Post a Comment

Popular posts from this blog

Export data from mysql db to csv file using java

Image
Hi friends ! Today I am discussing about simple but very important scenario. When we create any application then during creation of application we have face many scenarios like 1.Taking information from user and storing these information inside database : Generally such type of Operation is performed by user using form application 2.Taking Data from Database and Displaying on Page : We can perform such type of Operation in various ways like using JSP,JSTL tags or you can perform such operations using JQUERY also. 3.Taking Data from Database and download it in Excel or CSV format : In this we want our data from database and store it inside Excel or text files for further use. And we have chosen third scenario from discussion for performing this Operation we have to need three files exportCsv.html  :- this contains a button for clicking and performing exporting data from database Operation ExportData.java  :- It is a servlet class which defines connectivity fro...
Keep reading

Secure Database Connectivity in node.js with mysql

Image
Hi Everyone! Yesterday my friend Andrea from Italy asked me a question about secure Database connectivity in node.js with mysql i.e. he wants to a secure database connection in node.js for some secure keys like username,password,database name that we use during database connectivity.His problem is obviously right from security point of view as we know that JavaScript is client side scripting knowledge so it is compiled on client side so after inspecting page some one can be able to view these secure keys which I discussed previously. I surf internet and found there are various ways to solve this problem I am not discussing all of them here but also I discussing here two of them and after this discussion I think Andrea and other reader who are facing with same problem can be able to resolve their problem. I choose two ways to solve this problem. Connection code in app.js file Create a Json file Connection code in app.js file : Javascript is client side language and code i...
Keep reading

Introduction to VBA

Image
VBA stands for Visual Basic Application. . It is an event driven Programming language by Microsoft   now a days   it is predominantly used with Microsoft applications such as MS –Excel , MS-Word, MS-Access. VBA Application MS-Excel Provides loads on inbuilt functions.MS-Excel Provides only basic inbuilt functions which may not be sufficient to perform complex calculations but by using VBA we can create our own functions and perform our desirable tasks How to Access VBA Editor  In excel windows Press “ALT +F11”  to open VBA editor .. Step 1:   At first open Excel sheet Step 2:  Follow Above Tricks and open VBA Editor will be open  which looks like this . Some Important VBA Terminologies  Modules : Modules is the area where code is written. In above figure there is no any modules. How to insert Module ??? To insert modules in VBA right click on Microsoft Office Objects and then  a win...
Keep reading