Com And Hosting

Recently I have replied to an forum inquiry in Oracle APEX forum about appending accordion content from html region. Here is the original blog post –
https://forums.oracle.com/forums/thread.jspa?messageID=10926257#10926257

You can append html content in jQuery accordion quite easily by grabbing the content from any other html region in the page and then include the content in any specific accordion node. Here is the basic example of this –

<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="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />

<style type="text/css">

    #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>

In the above code I have created a hidden div with some contents and I want to display this content inside the second node of the accordion. Here is the jQuery code to set the accordion –

$(function () {
    var additionalContent = $('#additionalContent').html();
    $('#accordion2').append(additionalContent);
    $("#accordion").accordion();
});

Here is the screen shot when addition content added on dom ready –

jQuery_accordion

Here is an example jsFiddle – http://jsfiddle.net/Yfejz/1/

One thought on “Add additional content or append content in jQuery accordion”
  1. This is very interesting, You’re an excessively skilled blogger.

    I’ve joined your feed and look ahead to
    in quest of more of your magnificent post. Also, I’ve shared
    your web site in my social networks

Leave a Reply

Your email address will not be published.