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,
NavHi,
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)
<script type="text/javascript">
$(function() {
$('#accordion').accordion({
header: 'h3',
active: '.selected',
selectedClass: 'active'
</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 -
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... -TWrap 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> -
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. -
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)
<script type="text/javascript">
$(function() {
$('#accordion').accordion({
header: 'h3',
active: '.selected',
selectedClass: 'active'
</script>Regards,
Dimitri
http://dgielis.blogspot.com/
http://www.apex-evangelists.com/
Maybe you are looking for
-
What are the steps to change the name on the "House" in the side bar on OSX Mavericks?
What are the steps required to change the name on the "House" in the side bar for OSX Mavericks?
-
Downloaded Music Plays for 14 seconds then stops
I just downloaded a song that I wanted and went I went to play it, it says the song is 2:58 and has the bar that shows 2:58 but after it hits 14 seconds it stops and the play count goes one higher. I never had this happen nor have I heard of this hap
-
What are these options for in Mail preferences?
1)compact mail automatically 2)in composing, increase quote level ( what is quote level and what is it for and what is quaoted text?) 3) general preferences for mail...add invitations to iCal. How do you implement this option? Thank you Mac OS X (1
-
Hi all. i have a requirement to copy shipment instructions text from delivery to shipment in struction text in shipment when a delivery is added to a shipment. i can read the shipment text corresponding to the delivery using the fm read_text but when
-
I recently purchased a new laptop with Windows 8 which accordingly has Flash Player already installed. I later went to upload pictures on Facebook only for a pop up message to say that I do not have the latest version installed. I therefore, went on