How to dynamically create accordion with jquery under Apex 4

How to dynamically create accordion with jquery under Apex 4


Hi there,

I would like dynamically to add one accordion

Here is a simple example


    1. <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8" />
          <title>jQuery UI Accordion - Customize icons</title>
       
          <script type="text/javascript" src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/jquery.ui.core.js"></script>
          <script type="text/javascript" src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/jquery.ui.widget.js"></script>
          <script type="text/javascript" src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/jquery.ui.accordion.js"></script>
          <script type="text/javascript" src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/jquery.ui.button.js"></script>
       
          <script type="text/javascript">
          $(function() {
              var icons = {
                  header: "ui-icon-circle-arrow-e",
                  headerSelected: "ui-icon-circle-arrow-s"
              };
              $("#accordion").accordion({
                  icons: icons
              });
              $("#toggle").button().toggle(function() {
                  $("#accordion").accordion("option", "icons", false);
              }, function() {
                  $("#accordion").accordion("option", "icons", icons);
              });
          });
          </script>
      </head>
      <body>
       
      <div class="demo">
       
      <div id="accordion">
              <h3<a href="#" >Section 1</a></h3>
      <div>
      <p> Section 1</p>
      </div>
              <h3<a href="#" >Section 2</a></h3>
      <div>
      <p> Section 2</p>
      </div>
              <h3<a href="#" >Section 3</a></h3>
      <div>
      <p> Section 3</p>
      </div>
              <h3<a href="#" >Section 4</a></h3>
      <div>
      <p> Section 4</p>
      </div>
              <h3<a href="#" >Section 5</a></h3>
      <div>
      <p> Section 5</p>
      </div>
              <h3<a href="#" >Section 6</a></h3>
      <div>
      <p> Section 6</p>
      </div>
             
       
       
      </div>
       
      <button id="toggle">Toggle icons</button>
       
      </div><!-- End demo -->
       
       
       
      <div class="demo-description">
       
      <p>Customize the header icons with the <code>icons</code> option, which accepts classes for the header's default and selected (open) state.  Use any class from the UI CSS framework, or create custom classes with background images.</p>
       
      </div><!-- End demo-description -->
       
      </body>
      </html>














































































When I press a buton, I would like to add one calling a function like this:

  1. function SetTableInfo()
    {

    var Acord = document.getElementById("accordion");

    var MyH  = document.createElement('h3');
        MyH.tabIndex = -1;
        MyH.role = "tab";
        MyH.className = "ui-accordion-header ui-helper-reset ui-state-default ui-corner-all";
    var Span = document.createElement('span');
        Span.className = "ui-icon ui-icon-circle-arrow-e";
    var MyLk = document.createElement('a');
        MyLk.href = '#';
        MyLk.innerHTML = "Section 8";
        MyLk.tabIndex = -1;
    var MyDv = document.createElement('div');
        MyDv.innerHTML = "Section 8 Content";
       
    MyH.appendChild (Span);
    MyH.appendChild (MyLk);
    Acord.appendChild (MyH);
    Acord.appendChild (MyDv);


    }


























Unfortunatly, it's not working. I don't know why.

Could anyone help?

Many thanks
jko


















    • Topic Participants

    • jksr