6 Replies Latest reply: Mar 24, 2013 9:42 PM by M Tajuddin RSS

    adding regions to jquery accordion

    Gor_Mahia
      All,
      Ive created a jquery accordion as below and trying to insert apex regions in different jquery DIV but they don't show up. Can anybody help me on this please...?
      <div id="accordion">
      <h3>Section 1</h3>
      <div id="accordion1">
      <p>
      Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
      ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
      amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
      odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
      </p>
      </div>
      <h3>Section 2</h3>
      <div id="accordion2">
      <p>
      .....................more here
      thanks in advance.
        • 1. Re: adding regions to jquery accordion
          jariola
          Hi,

          What is your APEX version?
          What is actual jQuery code?
          Have you load jQuery UI accordion library?

          Regards,
          Jari
          -----
          My Blog: http://dbswh.webhop.net/htmldb/f?p=BLOG:HOME:0
          Twitter: http://www.twitter.com/jariolai
          • 2. Re: adding regions to jquery accordion
            Gor_Mahia
            Jari

            ive the following details,

            apex 4.1.1
             <title>jQuery UI Accordion - Default functionality</title>
            <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
            <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
            <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
            <link rel="stylesheet" href="/resources/demos/style.css" />
            <script>
            $(function() {
            $( "#accordion" ).accordion();
            });
            </script>
            
            and the code in my html page as below,
            
            <div id="accordion">
            <h3>Section 1</h3>
            <div id="accordion1">
            <p>
            Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
            ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
            amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
            </p>
            </div>
            <h3>Section 2</h3>
            <div id="accordion2">
            <p>
            . . . . . . more . . . . 
            also i tried the Patrick's steps below but it never worked for me, 
            
            Using jQueryUI Accordion with APEX 4.0
            thank you
            • 3. Re: adding regions to jquery accordion
              jariola
              Hi,

              Create example about problem to apex.oracle.com.

              Regards,
              Jari
              -----
              My Blog: http://dbswh.webhop.net/htmldb/f?p=BLOG:HOME:0
              Twitter: http://www.twitter.com/jariolai
              • 4. Re: adding regions to jquery accordion
                Gor_Mahia
                Jari,

                sorry for the delay but i created a sample with below details, also as you can see i created a region template as stated in the below Pats link, but it doesn't show up when i go to select it under region template for this new html region to be added. What might be the problem here ?
                problem with javascript window.open from button redirecting to URL
                wkspace/userid/pswd=proj2010/demo123/demo123
                app id=760 page=22, region40
                thank you.
                • 5. Re: adding regions to jquery accordion
                  jariola
                  Hi,

                  Your example is total mess.
                  Page HTML Body Attribute is not for entering HTML.

                  Regards,
                  Jari
                  -----
                  My Blog: http://dbswh.webhop.net/htmldb/f?p=BLOG:HOME:0
                  Twitter: http://www.twitter.com/jariolai
                  • 6. Re: adding regions to jquery accordion
                    M Tajuddin
                    Hi Gor,
                    You can add contents in accordion from another hidden html region by appending the original value of a accordion node. You can create a html region and set it to display none then get the region id from html source code when page rendered. Include the following code in the header section of any html region to set the accordion -
                    $(function () {
                        var additionalContent = $('#additionalContent').html();
                        $('#accordion2').append(additionalContent);
                        $("#accordion").accordion();
                    });
                    HTML code example -
                    <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
                    <style type="text/css">
                        #accordion h3 {
                            background-color: grey;
                            padding: 4px;
                        }
                        #additionalContent {
                            display: none;
                        }
                    </style>
                    <div id="accordion">
                        
                    <h3>Section 1</h3>
                    
                        <div id="accordion1">
                            <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut</p>
                        </div>
                        
                    <h3>Section 2</h3>
                    
                        <div id="accordion2">
                            <p>. . . . . . more . . . . also i tried the Patrick's steps below but it never worked for me,</p>
                        </div>
                    </div>
                    <div id="additionalContent">Today’s awesome collection of design freebies brings you a veritable utopia of navigation menu bliss. Each of the fifteen navigation menus below are both completely gorgeous 100% free to download. I’ve included both CSS and PSD menus so whether you’re just looking to create a mockup or need something fully functional, we’ve got you covered. Enjoy!</div>
                    Hope this helps. You can visit this jsFiddle example for working example - http://jsfiddle.net/Yfejz/1/

                    Kind regards,
                    Tajuddin
                    blog: http://tajuddin.saradesh.com