Manupulating Jquery Accordion height

Hi all,
I have downloaded accordion css and its js from jquery website and have implemented accordion in our application. Has anyone played with its js or css to decrease or increase the height of the header title of all the regions included in the accordion? Pls help. Its urgent. Thanks
With Regards,
Sunil Bhatia

If any one having similar issue here is the solution.
Just replace the Template code from [Patrick's solution|https://forums.oracle.com/forums/thread.jspa?messageID=4429587] with the below one :
<div id="#REGION_STATIC_ID#" #REGION_ATTRIBUTES#>
#BODY##SUB_REGION_HEADERS##SUB_REGIONS#
</div>
<link rel="stylesheet" href="#IMAGE_PREFIX#libraries/jquery-ui/1.8/themes/base/jquery.ui.accordion.css" type="text/css" />
<script src="#IMAGE_PREFIX#libraries/jquery-ui/1.8/ui/minified/jquery.ui.accordion.min.js" type="text/javascript"></script>
<script type="text/javascript">
apex.jQuery(function() {
  apex.jQuery("##REGION_STATIC_ID#").accordion({
               autoHeight: false
  var autoHeight = apex.jQuery("##REGION_STATIC_ID#").accordion( "option", "autoHeight" );
  apex.jQuery("##REGION_STATIC_ID#").accordion( "option", "autoHeight", false );
</script>Rest all remains same.
Good luck.

Similar Messages

  • Opening first tab of jquery accordion when page loads

    Hello, I am wondering how I would make the first tab of my accordion to open when the page loads. It is a custom accordion and therefore it is hard to find the answer online.
    I want this to be specific to a certain page if possible rather than universal across the site.
    Here is the HTML:
    <div id="st-accordion" class="st-accordion">
                        <ul>
                            <li>
                                <a href="#">Lorem ipsum<span class="st-arrow">Open or Close</span></a>
                                <div class="st-content">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consequat auctor ante, sodales pretium felis auctor in. Aenean tempor, orci vel vestibulum lobortis, justo augue laoreet turpis, id consectetur dolor arcu sed arcu. Sed id dolor tellus. Nulla eros risus, sollicitudin in ultricies ac, tincidunt et nisl. Nam ac consectetur est. Morbi pretium libero in lacus semper ultricies. Vestibulum in nibh a ligula malesuada posuere ac vel lorem. Duis varius scelerisque vehicula. Maecenas convallis tellus in tellus facilisis eget sollicitudin est lacinia. Ut quam tortor, pretium non lacinia sit amet, iaculis ac ipsum. Donec quis libero accumsan felis fringilla pulvinar eget in leo.</p>
                                </div>
                            </li>
                            <li>
                                <a href="#">Lorem ipsum<span class="st-arrow">Open or Close</span></a>
                                <div class="st-content">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque consequat auctor ante, sodales pretium felis auctor in. Aenean tempor, orci vel vestibulum lobortis, justo augue laoreet turpis, id consectetur dolor arcu sed arcu. Sed id dolor tellus. Nulla eros risus, sollicitudin in ultricies ac, tincidunt et nisl. Nam ac consectetur est. Morbi pretium libero in lacus semper ultricies. Vestibulum in nibh a ligula malesuada posuere ac vel lorem. Duis varius scelerisque vehicula. Maecenas convallis tellus in tellus facilisis eget sollicitudin est lacinia. Ut quam tortor, pretium non lacinia sit amet, iaculis ac ipsum. Donec quis libero accumsan felis fringilla pulvinar eget in leo </p> 
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
            <script type="text/javascript">
                $(function() {
                                            $('#st-accordion').accordion({
                                                      oneOpenedItem          : true
            </script>
                        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
            <script type="text/javascript" src="js/jquery.accordion.js"></script>
                </div>
    And the CSS:
    .st-accordion{
        width:100%;
        min-width:270px;
        margin: 0 auto;
    }.st-accordion ul li{
        height: 100px;
        border-bottom: 1px solid #c7deef;
        border-top:1px solid #fff;
        overflow: hidden;
    .st-accordion ul li:first-child{
        border-top:none;
    .st-accordion ul li > a{
        font-family: 'Josefin Slab',Georgia, serif;
        text-shadow: 1px 1px 1px #fff;
        font-size: 22px;
        display: block;
        position: relative;
        line-height: 100px;
        outline:none;
        -webkit-transition:  color 0.2s ease-in-out;
        -moz-transition:  color 0.2s ease-in-out;
        -o-transition:  color 0.2s ease-in-out;
        -ms-transition:  color 0.2s ease-in-out;
        transition:  color 0.2s ease-in-out;
    .st-accordion ul li > a:hover{
        color: #1693eb;
    .st-accordion ul li > a span{
        background: transparent url(../images/down.png) no-repeat center center;
        text-indent:-9000px;
        width: 26px;
        height: 14px;
        position: absolute;
        top: 50%;
        right: -26px;
        margin-top: -7px;
        opacity:0;
        -webkit-transition:  all 0.2s ease-in-out;
        -moz-transition:  all 0.2s ease-in-out;
        -o-transition:  all 0.2s ease-in-out;
        -ms-transition:  all 0.2s ease-in-out;
        transition:  all 0.2s ease-in-out;
    .st-accordion ul li > a:hover span{
        opacity:1;
        right: 10px;
    .st-accordion ul li.st-open > a{
        color: #1693eb;
    .st-accordion ul li.st-open > a span{
        -webkit-transform:rotate(180deg);
        -moz-transform:rotate(180deg);
        transform:rotate(180deg);
        right:10px;
        opacity:1;
    .st-content{
        padding: 5px 0px 30px 0px;
    .st-content p{
        font-size:  16px;
        font-family:  Georgia, serif;
        font-style: italic;
        line-height:  28px;
        padding: 0px 4px 15px 4px;
    .st-content img{
        width:125px;
        border-right:1px solid #fff;
        border-bottom:1px solid #fff;
    @media screen and (max-width: 320px){
        .st-accordion ul li > a{
            font-size:14px;
    @media screen and (max-width: 800px){
        .st-accordion ul li > a{
            font-size:16px;
    You can find the page at http://bit.ly/Zrpt1s
    Any help is grately appreciated thanks!

    Try
    $(function() {
        $('#st-accordion').accordion({
            oneOpenedItem    : true,
           open: 0

  • Jquery accordion where we can open more than one region at the same time

    Hi,
    I am trying to create a jquery accordion where we can open more than one region at the same time. I saw a post
    from patrick to do accordion where we can select only one region at a time.I am using Apex 4.0
    Using jQueryUI Accordion with APEX 4.0
    Any input on this will be appreciated.
    Thanks,
    Nav

    Hi,
    As I understand jQuery UI accordion do not have feature you looking for
    Regards,
    Jari
    Edited by: jarola on Sep 7, 2010 12:29 PM
    See documentation from here
    http://jqueryui.com/demos/accordion/#default

  • Dynamic Accordion height (revisited)

    Hi All,
    I have an application that allows the user to add or remove
    Accordion panels at will. My problem is that I want to keep the
    overall Accordion height constant independent of the number of
    panels.
    I have found a simple way to keep the overall height of an
    Accordion constant by varying the AccordionPanelContent height as
    follows:
    <div class="AccordionPanelContent" style="height:
    expression(500-(20*{ds_RowCount})+'px'); margin: 0px;">
    The problem is that it only works in IE5+.
    Is there a way to achieve the same result for other browsers?

    quote:
    Originally posted by:
    Barascu Diana
    Hi,
    you can use expression () only for IE and if you want to get
    the same behavior for the other browsers, you should write some
    java script code to compute the height and then to set it on the
    element.
    Something like this:
    var el = document.getElementById('id_{ds_RowID}');
    if (el){
    el.style.height = 500 - (20 *
    (isNaN(parseInt('{ds_RowCount}'))? 0 : parseInt('{ds_RowCount}')))
    + 'px';
    Diana
    Hello Diana,
    Thank you very much for your quick response. I used your
    script and it and it works like a charm.
    Kind regards,
    Ben

  • Jquery Accordion as menu problem

    I implemented Jquery accordion as a menu. I have following setup for the accordion menu (page template body region position 3, column 1):
    MENU 1
    ¦_ Link to report 1
    ¦_ Link to report 2
    MENU 2
    ¦_ Link to report 3
    ¦_ Link to report 4
    On page template body region position 3, column 2 .... I have the Jquery Tab to shows the selected report according to the accordion menu selection.
    At initial page loading, MENU 1 is expanded and MENU to is collapse...this is OK.
    Then user clicks on the MENU 2, immediately the MENU 1 collapsed and MENU 2 expanded and shown the "Link to report 3" and "Link to report 4".
    But when user clicks on the "Link to report 3", the page is refresh / submitted and the Jquery tab on column 2 showing the correct report but the accordion MENU 1 is expanded and MENU 2 is collapsed.
    How can I make: when user clicks on menu item (Link to report 3 or Link to report 4) of MENU 2, the MENU 2 still expanded and MENU 1 is still collapsed?

    Hello,
    You can programitacally open the right tab. Here is the code I use on http://anychart.apex-evangelists.com (the menu on the left is an accordion)
    &lt;script type="text/javascript">
      $(function() {
        $('#accordion').accordion({
          header: 'h3',
          active: '.selected',
          selectedClass: 'active'
    &lt;/script>Regards,
    Dimitri
    http://dgielis.blogspot.com/
    http://www.apex-evangelists.com/

  • Apex textarea inside jquery accordion

    hello,
    can anyone please help me how to include a apex textarea inside jquery accordion.

    i used jquery accordion i just copy n paste this code into my apex application.
    <!DOCTYPE html>
    <html>
    <head>
    <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
    <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
    <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.accordion.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("#accordion").accordion();
    </script>
    </head>
    <body style="font-size:62.5%;">
    <div id="accordion">
         <h3>Section 1</h3>
         <div>
              <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>
              <p>
              Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
              purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
              velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
              suscipit faucibus urna.
              </p>
         </div>
         <h3>Section 3</h3>
         <div>
              <p>
              Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
              Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
              ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
              lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
              </p>
              <ul>
                   <li>List item one</li>
                   <li>List item two</li>
                   <li>List item three</li>
              </ul>
         </div>
         <h3>Section 4</h3>
         <div>
              <p>
              Cras dictum. Pellentesque habitant morbi tristique senectus et netus
              et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
              faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
              mauris vel est.
              </p>
              <p>
              Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
              Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
              inceptos himenaeos.
              </p>
         </div>
    </div>
    </body>
    </html>
    i am getting the accordion but i need to put textarea areas in each section.when i create a text area i m not able to see any region in accordion.

  • Page length doesn't snap to accordion height when accordion at page bottom becomes shorter?

    Hello, I created a page with an accordion widget at the bottom of the page and rather than snapping to the height of the accordion the page sticks to the length of the tallest accordion height. You can see my test page at http://hawksgym.com/cesarnoel/   Is there something I can do or will I have to resort to all the accordion divs always adding up to the same height?

    Hi,
    Do you have Sticky Footer Checked? If yes, please uncheck it and then try.
    Regards,
    Aish

  • How can I make a jQuery accordion panel tab collapsed by default?

    I have Googled this and saw that someone recommended placing the 'collapsible' option before the 'active' one. For example,
    $( ".accordion" ).accordion("option", {
        collapsible: true,
        active: false
    I am completely new to Dreamweaver. I inserted a jQuery UI Accordion into my web page because I need a drop-down list. I have a main .css file for my page. Additional jquery css files were added after I inserted the accordion. (For example, I see jquery.ui.core.min.css, jquery.ui.theme.min.css, jquery.ui.caccordion.min.css, jquery-1.8.3.min.js, jquery-ui-1.9.2.accordion.custom.min.js).
    I see a section in jquery-ui-1.9.2.accordion.custom.min.js where I think I might be able to change these settings, but I just want to make sure.
    options:{active:0,animate:{},collapsible:!1,event:"click"
    Thanks in advance for any suggestions.

    Yes, setting collapsible to true (so all sections can collapse at once) and then setting no section as active, it will start completely collapsed, e.g.:
    $( ".accordion" ).accordion({collapsible:true,active:false});
    Do note this is being applied to a container element with the "class" of 'accordion' and not the ID, per your code. If it's ID then use:
    $( "#accordion" ).accordion({collapsible:true,active:false});

  • Dynamic overall Accordion height

    I have several Spry Accordions in my application. The number
    of panels in each of these accordions are database driven, where
    each user can customize the number of panels and their titles. The
    new SpryNestedXMLDataSet is used to show the data in each panel.
    This works extremely well!
    However, the layout of the page dictates that the overall
    height of the accordion be the same, weather it be for 3 panels or
    for 10 panels. Is there a way that this can be achieved in
    Spry?

    Hi Ben,
    now I see your request....
    you want a fix height container in which to have the
    accordion with X panels...
    You can add the accordion inside another div container for
    which you set a fix height and don't forget to add also
    overflow:auto (this is to see only the content what fits in the
    height you specified).
    You should have something like this:
    <div style="height:600px; overflow:auto;">
    <div id="Accordion1" class="Accordion" tabindex="0">
    <div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
    <p>Content 1</p>
    </div>
    </div>
    ....... as much panels you need...
    </div>
    </div>
    So just add a new div with that two properties around the
    accordion.
    Please let me know if I answered to you question,
    Diana

  • Accordion Height Issue

    I have apage I am working on and testing the Spry and various
    elements on...
    http://www.tommylogic.com/web-design/
    I have the tabs opening fine now and all styled like I want
    it. The issue I am having is on 3 items:
    - When I first try to open and close the panels, the first
    click never opens it. Only after the 2nd or thrird click or tab
    that I click on.
    - When they do open, they open in consistent heights,
    sometimes with a scrollbar, sometimes not.
    -Then when I get one open it wont always show all the
    content in that particular panel <div>.
    - If I close specific panel that is open first, then open
    the new panel, it seems to do a bit better, but not always the
    same.
    I am passing it through like this
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    var acc8 = new Spry.Widget.Accordion("Accordion1", {
    useFixedPanelHeights: false, defaultPanel: -1 });
    All the heights are cleared in the CSS as well.
    Any clues?
    //////////////////////// resolution
    removed extra line and changed var to Accordion1
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", {
    useFixedPanelHeights: false, defaultPanel: -1 });
    and some minor css tweaks in there as well.
    Thanks Anyway... -T

    Wrap the Accordion in a VBox and you should be all set.
    <?xml version="1.0" encoding="utf-8"?>
    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
      creationComplete="init();">
      <mx:Script>
        <![CDATA[
          import mx.containers.VBox;
          private function init():void{
            for(var a:uint=0;a<100;a++){
              var vb:VBox = new VBox();
              vb.label = "MyVBox" + a;
              vb.width = 200;
              vb.height = 100;
              acc.addChild(vb);
        ]]>
      </mx:Script>
      <mx:HDividedBox width="100%" height="100%">
        <mx:VBox width="50%" height="100%"/>
        <mx:VDividedBox width="50%" height="100%">
          <mx:VBox width="100%" height="50%"/>
          <mx:VBox width="100%" height="50%">
            <mx:Accordion id="acc" width="100%" height="50%"/>     
          </mx:VBox>
        </mx:VDividedBox>
      </mx:HDividedBox>
    </mx:Application>
    If this post answers your question or helps, please mark it as such.
    Greg Lafrance - Flex 2 and 3 ACE certified
    www.ChikaraDev.com
    Flex / AIR Development, Training, and Support Services

  • JQuery Accordion Help: Closing Active Panel

    I am new to JQuery Accordions and would like to keep the selected active panel open when navigating through the content.  I have four areas in the accordion and each area has multiple links below.  When I click on a link, it collapses the panel and defaults back to the first panel and opens it.
    I would like it to stay open in the active panel.  I am using Dreamweaver CC and the code is below:
    $(function() {
      $( "#Accordion1" ).accordion({
      active:true,
      animate:{duration: 1},
      icons:{header: "ui-icon-plusthick", activeHeader: "ui-icon-minusthick"},
      heightStyle:"content",
      collapsible:true,
    And an example of the site: http://training.getfueledservices.com/FEC/SelfPayParent/SelfPayOverview01.html
    Basically when I click on any of the content in panels 2, 3, or 4, it reverts back to the first panel.
    Thank you for your help and time.

    On the page you link to change the 'active: X' state - so for the 'Peak Office' page change it to - active: 1, - Peak Classroom  page change to - active: 2, see if that works.
    <script type="text/javascript">
    $(function() {
    $( "#Accordion1" ).accordion({
    active: 1,
    animate:{duration: 1},
    icons:{header: "ui-icon-plusthick", activeHeader: "ui-icon-minusthick"},
    heightStyle:"content",
    collapsible:true,
    </script>

  • Accordion Height

    Hi All,
    How can I provide the getHeight() Api for accordion.
    I am aware about maxHeight property of accordionSection.
    But my requirement is to implement getHeight() api on accordion, which will take care of all the sections heights, expanded section and also browser specific paddings. in essence resizing should also be considered.
    Has anyone tried this?
    Any pointers would be helpful.
    Thanks.

    Please mark this Discussion with a Correct Answer and Helpful Answer where appropriate.  See http://scn.sap.com/community/support/blog/2013/04/03/how-to-close-a-discussion-and-why   Even if you discovered the solution without any outside contributions, it helps others to understand what the solution turned out to be.
    Regards, Mike
    SAP Customer Experience Group - CEG

  • Jquery Accordion with Sitemap as a Datasource

    Hi techies,
    I have created one accordion using Ajax Toolkit with sitemap as a datasource.. but due to performance issue now i need to redevelop it using Jquery with Sitemap as a datasource.
    Any help will be appreciated.

    Here is a much easier way, using just designer.
    The default SharePoint menu is using <SharePoint:ASPMenu> control, which in tern using SiteMapDataSource as data source. Open a default SharePoint master page, you should see them.
    In order to apply the accordion animation to it, you just need to apply proper style (classes) to the ASPMenu generated.
    To do that, I am using a PageLayout page as example,
    put a div tag around the <SharePoint:ASPMenu> tag like below.
    <div class="ms-core-sideNavBox-removeLeftMargin" id="accordion">
    Add reference to the accordion jquery-UI library,
    Add this following script to the Addtionalpagehead section,
    function init(){
        $(".root > li > a").bind('click',function(e){
            e.preventDefault();
            if(false == $(this).next().is(':visible')) {
                $('.root > li > ul').slideUp(300);
            $(this).next().slideToggle(1000);
        $("#accordion ul > li > ul:gt(0)").hide();
    //    $(".root > li > ul:gt(0)").hide();
    //    $('#accordion ul:eq(0)').show();
        $(document).ready(init);
    John Architect

  • How to edit the accordion height?

    Hi,
    first of all, sorry for my english ;)
    I tried to edit my Spry Accordion's height like that:
    <div id="Services" class="Accordion" tabindex="0"
    style="height: 500px;">
    but it seems to make an error in the accordion (
    view
    screen). how can i modity the height of this "control" without
    any problem in the design...
    Thanks,
    Regards.

    Hi,
    if you want to use a fix layout, then you should use a
    formula for computing correctly the height.
    For the accordion situation, you should use a formula like
    this:
    Accordion_container_height = sum of all (PanelTabs_height) +
    PanleContent_height + sum of all(margins, paddings and borders).
    This is translated to: the Accordion container height
    depends by all the tabs height, the PanelContent height and also
    you should not forget by the borders, paddings and margins.
    In your case, you should compute first the height for all
    Panles tabs together plus content plus borders, margins and then
    you'll have the correct size for the container that you initially
    set to 500px
    Hope this helps,
    Diana.

  • Jquery Accordion menu problem

    I have create jquery accordian menu as per Patrick Wolf post. I have following setup for the accordion menu (page template body region position 3, column 1):
    MENU 1
    ¦_ Link to report 1
    ¦_ Link to report 2
    MENU 2
    ¦_ Link to report 3
    ¦_ Link to report 4
    At initial page loading, MENU 1 is expanded and MENU to is collapse...this is OK.
    Then user clicks on the MENU 2, immediately the MENU 1 collapsed and MENU 2 expanded and shown the "Link to report 3" and "Link to report 4".
    But when user clicks on the "Link to report 3", the page is refresh / submitted and the Jquery tab on column 2 showing the correct report but the accordion MENU 1 is expanded and MENU 2 is collapsed.
    How can I make: when user clicks on menu item (Link to report 3 or Link to report 4) of MENU 2, the MENU 2 still expanded and MENU 1 is still collapsed?

    Hello,
    You can programitacally open the right tab. Here is the code I use on http://anychart.apex-evangelists.com (the menu on the left is an accordion)
    &lt;script type="text/javascript">
      $(function() {
        $('#accordion').accordion({
          header: 'h3',
          active: '.selected',
          selectedClass: 'active'
    &lt;/script>Regards,
    Dimitri
    http://dgielis.blogspot.com/
    http://www.apex-evangelists.com/

Maybe you are looking for