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

  • jQuery Accordion

    @vishwanath.rana
    Recommendations Offline Message

    • 0
    • 3
    • 0
    • 0
    • 1
    • 0
    • 0
    • 0
    • 4.87k
    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>
    jQuery Accordion
    Comment on it

 1 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           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: