Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • jQuery Accordion

    • 0
    • 3
    • 0
    • 0
    • 4
    • 0
    • 0
    • 0
    • 574
    Comment on it

    Hello readers!
    In this Blog we will gain knowledge about Accordion and how to use it . An Accordion is a vertically stacked list of items which allows users to toggle the display of sections of content. Each item(Header in this example) can be expanded or collapsed to display the content associated with that . Accordion are useful in the pages where there is a lot of content to be placed on the page and a developer don't want to look the page messy.

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>jQuery Accordion - Adding accordion dynamically</title>
      <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
    
      <!-- Below is the Styling for accordion-->
      <style>
              .accordion, .accordion * {
                -webkit-box-sizing:border-box; 
                -moz-box-sizing:border-box; 
                box-sizing:border-box;
            }
    
            .accordion {
                overflow:hidden;
                box-shadow:1px 1px 1px rgba(25,0,25,0.25);
                border-radius:3px;
                background:#f7f7f7;
            }
    
            /*----- For Headers or Title -----*/
            .accordion-section-title {
                width:100%;
                padding:15px;
                display:inline-block;
                border-bottom:1px solid #1a1a1a;
                background:#333;
                transition:all linear 0.15s;
                /* Type */
                font-size:1.00em;
                text-shadow:0px 1px 0px #1a1a1a;
                color:#fff;
            }
    
            .accordion-section-title.active, .accordion-section-title:hover {
                background:#4c4c4c;
                /* Type */
                text-decoration:none;
            }
    
            .accordion-section:last-child .accordion-section-title {
                border-bottom:none;
            }
    
            /*----- Stye for Section Content -----*/
            .accordion-section-content {
                padding:10px;
                display:none;
            }
      </style>
    <!-- End of styling -->
    
      <script>
      $(document).ready(function(){
          $("#btnAddAccordion").click(fnAddNewAccordion);
            $( "#accordion" ).accordion({
            collapsible: true });
        function fnAddNewAccordion()
          {
    
             var HeaderForNewAccordion=$("#txtHeader").val();
            var ContentForNewAccordion=$("#txtContent").val();
            var content = "<a class=accordion-section-title>" + HeaderForNewAccordion + "</a><div class=accordion-section-content><p>" + ContentForNewAccordion +  "</p></div>";
    
            $("#accordion").append( content );
            $("#accordion").accordion('refresh');
    
          }
      });
      </script>
    </head>
    <body>
     <div >
        <p> Enter Header : </p><input type="text" id="txtHeader"><!-- Enter your Header for accordion here -->
        <p> Enter Content for above Header: </p><input type="text" id="txtContent"><!-- Enter your Content for the above Header here -->
        <button id="btnAddAccordion"  >Add as Accordion</button>
     </div>
    <div class="accordion" id="accordion">
    
    
    </div>
    
    
    </body>
    </html>
    

 4 Comment(s)

  • Review on Begum Jaan
    MOVIE: Begum Jaan
    Starring: Vidya Balan, Naseeruddin Shah and Gauhar Khan
    Directed by: Srijit Mukherji
    Producer: Mahesh Bhatt and Mukesh Bhatt
    Music Director: Anu Malik
    Released on : 17 Mar 17
    The Radcliffe Line separated a nation into three parts: East Pakistan, West Pakistan and India. Director Srijit Mukherji’s Rajkahini a Bengali film featured men and women living in a house right in the center of West Bengal and East Pakistan.

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: