This discussion is archived
6 Replies Latest reply: Mar 24, 2013 7:42 PM by M Tajuddin RSS

adding regions to jquery accordion

Gor_Mahia Explorer
Currently Being Moderated
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 Guru
    Currently Being Moderated
    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 Explorer
    Currently Being Moderated
    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 Guru
    Currently Being Moderated
    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 Explorer
    Currently Being Moderated
    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 Guru
    Currently Being Moderated
    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 Journeyer
    Currently Being Moderated
    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

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points