Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to create an Accordion

    • 0
    • 1
    • 1
    • 1
    • 0
    • 0
    • 0
    • 0
    • 130
    Comment on it

    This tutorial will help you to create an accordion and use it for making html page more user friendly, interactive and presentable. Accordion are usually used in pages that consists questionnaires and wherein we want to display the answers and move forward quickly, have multiple categories and sub categories.

    We will learn it in the following 3 steps:


    1. Let us start with the html code:
    2. <html>
      <head>
          <title>Accordion</title>
      
          <link rel="stylesheet" type="text/css" href="main.css">
          <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
          <script type="text/javascript" src="accordfunctionality.js"></script>
      </head>
      <body>
      
          <div class="main">
              <div class="accord">
      
                  <div>
                      <a class="title-for-content" href="#content-1">Content 1</a>
                      <div id="content-1" class="content">
                          <p>This section consists content 1.</p>
                      </div><!--end of div with id #content-1-->
                  </div>
      
                  <div>
                      <a class="title-for-content" href="#content-2">Content 2</a>
                      <div id="content-2" class="content">
                          <p>This section consists content 2.</p>
                      </div><!--end of div with id #content-2-->
                  </div>
      
                  <div>
                      <a class="title-for-content" href="#content-3">Content 3</a>
                      <div id="content-3" class="content">
                          <p>This section consists content 3.</p>
                      </div><!--end of div with id #content-3-->
                  </div>
      
              </div><!--end of div with class .accord-->
          </div>
      </body>
      </html>
      

    3. In this second step, we will write a css file named: main.css
    4. .title-for-content {
          width:350px;
          display:inline-block;
          border:2px solid #FFE300 ;
          background:#1591F2; 
          text-align: center;
          padding:10px;
      
      }
      
      .content {
          padding:10px;
          display:none;
      }
      

    5. In this step we will create a file named: accordfunctionality.js
    6. $(document).ready(function() {
          function output_for_accord() {
              $('.accord .title-for-content').removeClass('active');
              $('.accord .content').slideUp(100).removeClass('open');
          }
      
          $('.title-for-content').click(function(e) {
              // get the value of current anchor 
              var value_of_div_id = $(this).attr('href');
      
              if($(e.target).is('.active')) {
                  output_for_accord();
              }else {
                  output_for_accord();
      
                  // Add active class to section title
                  $(this).addClass('active');
                  // Display the hidden content 
                  $('.accord ' + value_of_div_id).slideDown(100).addClass('open'); 
              }
              e.preventDefault();
          });
      });
      

      For more information visit the below Link:

      https://jqueryui.com/accordion/

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: