Praveen Singh

Simplest Approach: Accordion Widget

SIMPLE Accordion WIDGET USING JQUERY

This article explain, how to create a simple Accordion widget using JQuery without any UI library.

live demo: single active pane accordion widget.


CODE: single active pane accordion widget.



<html>
<head>
<style type="text/css">
.singlePaneAccordion {
 width: 500px;
 margin: auto;
}

.singlePaneAccordion h1 {
 background: #e3e3e3;
 text-align: center;
 line-height: 2em;
 cursor: pointer;
 font-size: 1.2em;
 font-weight: bold;
 border-bottom: 1px solid #C5C5C5;
 border-top: 1px solid white;
 margin: 0px;
}

.singlePaneAccordion div {
 margin: 0;
 line-height: 2em;
 font-size: 1.2em;
}
</style>
</head>
<body>
 <div class="singlePaneAccordion">
  <h1>HTML</h1>
  <div>HyperText Markup Language</div>
  <h1>CSS</h1>
  <div>Cascading Style Sheets</div>
  <h1>JS</h1>
  <div>JavaScript</div>
 </div>
 <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
 <script type="text/javascript">
 (function() {
  $(".singlePaneAccordion").children("div").hide();
  $(".singlePaneAccordion").children("h1").on("click", function() {
   $(this).siblings('div').slideUp(300);
   $(this).next('div').slideDown(300);
  });
 })();
</script>
</body>
</html>

live demo: Simplest multi active pane accordion widget.


CODE: Simplest multi active pane accordion widget.


 
 <html>
<head>
<style type="text/css">
.multiPaneAccordion {
 width: 500px;
 margin: auto;
}

.multiPaneAccordion h1 {
 background: #e3e3e3;
 text-align: center;
 line-height: 2em;
 cursor: pointer;
 font-size: 1.2em;
 font-weight: bold;
 border-bottom: 1px solid #C5C5C5;
 border-top: 1px solid white;
 margin: 0px;
}

.multiPaneAccordion div {
 margin: 0;
 line-height: 2em;
 font-size: 1.2em;
}
</style>
</head>
<body>
 <div class="multiPaneAccordion">
  <h1>HTML</h1>
  <div>HyperText Markup Language</div>
  <h1>CSS</h1>
  <div>Cascading Style Sheets</div>
  <h1>JS</h1>
  <div>JavaScript</div>
 </div>
 <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
 <script type="text/javascript">
  (function() {
   $(".multiPaneAccordion").children("div").hide();
   $(".multiPaneAccordion").children("h1").on("click", function() {
    $(this).next('div').slideToggle();
   });
  })();
 </script>
</body>
</html>
 
 
 

Tutorial + demo + discussion video


1 comment:

  1. Hi, Great.. Tutorial is just awesome..It is really helpful for a newbie like me.. I am a regular follower of your blog. Really very informative post you shared here. Kindly keep blogging. If anyone wants to become a Front end developer learn from Javascript Training in Chennai . or Javascript Training in Chennai. Nowadays JavaScript has tons of job opportunities on various vertical industry. ES6 Training in Chennai

    ReplyDelete