Accordion inside accordion?

I would like to use an accordion; with another accordion located on the third tab within the first accordion. Is this possible? Flash would not let me import the second into the first and Dreamweaver does not offer the option either. I am using CS3 for the applications and I cannot get one inside the other. If this is not possible, would you be able to offer a suggestion as to how something like this may be done? Thank you in advance.

If you are building a Flash accordian why not just use ActionScript to include the additional flash file. That's how you do it. If you need help with the ActionScript side of it you would be better posting that over in the Flash forums:
http://forums.adobe.com/community/flash

Similar Messages

Text Shift Uncontrollably Inside Accordion Widget

Guys hi! I've been crashing my head for two days with this. Hope you will provide some help!
I have an Accordion Widget with a very long text block inside one of the boxes (a list with over 80 lines). On the background to each second line I put a grey rectange shape just to give some contrast to the lines in the list. In the project all the rectangles are prefectly aligned to be right behind the lines. But when I publish the site I definately see that the rectangles shift up or down.
Is it a bug and the widget simply cannon handle correctly so many elements insie the feiled or am i missing something here?
Many thanks in advance for your advice!! You might be saving me from insanity here;)
UPDATE!! It was not the shapes but the text that was shifting. I fave some items on the list that consists of two lines. That's where I changed the leading betwin those two lines from 200% (for separate items in the list) to 146% between two lines (for the items that cosist of two lines of the text). That somehow couses the text to shift in the preview mode xompared to the design mode. When I make the leading unilateral throghout the entire textbox everything stands in place.
Still the problem remains unsolved.

Zak. thank you very much!
And sorry for coming back so late on this.
You solution perfectly solved the problem.
On the downside,) I did have to change the layout and reformat the site to submit it to the client because the deadline came before I got your reply.
Perhaps the "Round Leading to a Whole Number" setting should be checked by default to avoid this kind of problems for other users in the future.
Anyway, a million thanks!

Problem using accordion inside TabbedpanelContent

I have made a tabbed panel, inside (i.e in TabbedPanelContent) i have used multiple accordion & also i have used xml data set for displaying data.
Now problem is that the xml data is only displaying on Accordion & not on TabbedPanels.On TabbedPanelsTab it shows empty data.
The below is the script
<html>
<head>
<title>Library System</title>
<script type="text/javascript" language="javascript" src="SpryAssets/SpryAccordion.js"></script>
<script type="text/javascript" language="javascript" src="SpryAssets/SpryTabbedPanels.js"></script>
<script type="text/javascript" language="javascript" src="SpryAssets/SpryData.js"></script>
<script type="text/javascript" language="javascript" src="SpryAssets/xpath.js"></script>
<script>
var dsEmployees=new Spry.Data.XMLDataSet("quotes.xml","employees/employee1");
var dsEmployees=new Spry.Data.XMLDataSet("quotes.xml","employees/employee");
</script>
<link type="text/css" rel="stylesheet" href="SpryAssets/SpryAccorduion.css"/>
<link type="text/css" rel="stylesheet" href="SpryAssets/SpryTabbedPanels.css"/>
</head>
<body>
<div id="example" spry:region="dsEmployees" class="live">
<div id="TP2" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab">{bookworld}</li>
<li class="TabbedPanelsTab">{bookissued}</li>
<li class="TabbedPanelsTab">{myacc}</li>
<li class="TabbedPanelsTab">{newarrival}</li>
<li class="TabbedPanelsTab">{faq}</li>
<li class="TabbedPanelsTab">{logout}</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"><br/>
<div id="DataRegion" spry:region="dsEmployees">
    <div id="Acc1" class="Accordion" tabindex="0">
    <div spry:repeat="dsEmployees" spry:test="{serial}==1" class="AccordionPanel">
      <div class="AccordionPanelTab">{lastname}</div>
      <div class="AccordionPanelContent">{firstname} {lastname}</div>
    </div>
    </div>
    <div id="Acc2" class="Accordion" tabindex="0">
    <div spry:repeat="dsEmployees" spry:test="{serial}==2" class="AccordionPanel">
      <div class="AccordionPanelTab">{lastname}</div>
      <div class="AccordionPanelContent">{firstname} {lastname}</div>
    </div>
    </div>
    <script type="text/javascript">
var a1 = new Spry.Widget.Accordion("Acc1");
var a2 = new Spry.Widget.Accordion("Acc2");
</script>
</div>
</div>
<div class="TabbedPanelsContent">ABN AMRO</div>
<div class="TabbedPanelsContent">ICICI BANK</div>
<div class="TabbedPanelsContent">YES BANK</div>
<div class="TabbedPanelsContent">UTI BANK</div>
<div class="TabbedPanelsContent">HDFC BANK</div>
</div>
</div>
<script>
var t2=new Spry.Widget.TabbedPanels("TP2");
</script>
</div>
</body>
</html>
Below is the xml code
<employees>
<employee1>
<bookworld>Book World</bookworld>
<bookissued>Book Issued</bookissued>
<myacc>My Account</myacc>
<newarrival>New Arrival</newarrival>
<faq>Faq's<faq>
<logout>Log Out</logout>
</employee1>
<employee>
<serial>1</serial>
<firstname>John</firstname>
<lastname>Marsh</lastname>
</employee>
<employee>
<serial>1</serial>
<firstname>John1</firstname>
<lastname>Marsh1</lastname>
</employee>
<employee>
<serial>2</serial>
<firstname>John2</firstname>
<lastname>Marsh2</lastname>
</employee>
<employee>
<serial>2</serial>
<firstname>John3</firstname>
<lastname>Marsh3</lastname>
</employee>
</employees>

Hi,
Yes I understood the query but a live accessible version always make it easier to diagnose what is wrong.
Well I've put a new page together with accordions working under spry tabbed panels with both being generated from the same Spry xml dataset and got it all working.
You need to do the following
To ensure you do not try to generate the accordion and tabbed panel behaviors etc until the Spry dataset has finished generating the html markup for the region.
var myObserver = new Object;
myObserver.onPostUpdate = function(notify, data)
var Accordion1 = new Spry.Widget.Accordion('Acc1');
var TabbedPanels1 = new Spry.Widget.TabbedPanels('example');
Spry.Data.Region.addObserver("example", myObserver);
The code for a working example I have done for repeating elements is as below
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/xpath.js" type="text/javascript"></script>
<script src="SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels" spry:region="event">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0" spry:repeat="event">{Title}</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent" spry:repeat="event">
      <div id="Accordion{ds_RowID}" class="Accordion" tabindex="0">
        <div class="AccordionPanel">
          <div class="AccordionPanelTab">{EventType}</div>
          <div class="AccordionPanelContent">{StartDate}</div>
        </div>
        <div class="AccordionPanel">
          <div class="AccordionPanelTab">{EndDate}</div>
          <div class="AccordionPanelContent">{Details}</div>
        </div>
      </div>
    </div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
I've even put it on the Internet so you can see it in action.
http://www.pwhitehurst.f2s.com/tabbedaccordion.html
Hopefuly this should be enough to get yours working.
Regards
Phil

Getting squish to work on IE inside accordion which is inside a table

Greetings all. I'm having trouble getting Squish to work
inside an accordion, on IE only. Everything works fine in Firefox.
Now, technically, this isn't a Spry problem; it's a problem with
the lame HTML I'm currently stuck with. See, everything works fine
when isolated in its own page. But when I drop the stuff into our
existing HTML, on IE the squish stops working. What happens is that
the div the squish is to open simply doesn't open up. it stays
hidden.
I've narrowed it down to this: it stops working when I put
the accordion divs inside a table cell. Yes, I'm stuck with using
tables for layout at this point and I can't change that. So the
question is, Is there a way I can get the squish to work in IE with
the accordion divs inside a table cell?
Here's the code:
<TABLE CLASS="bodyTable" cellpadding="0" cellspacing="0"
width="820">
<TR>
<TD CLASS="middleCol" align="left" width="100%"
id="middleCol">
<div class="library_Accordion" id="library">
<div
id="library_AccordionPanel_1"class="library_AccordionPanel">
<div
id="library_AccordionPanelTab_1"class="library_AccordionPanelTab"
onclick="accordionSetSelectedTabCookie('_accordion_library',0)"><h3>Search
Library</h3></div>
<div id="library_AccordionPanelContent_1"
class="library_AccordionPanelContent">
<div>
jjjj
</div>
</div>
</div>
<div
id="library_AccordionPanel_2"class="library_AccordionPanel">
<div
id="library_AccordionPanelTab_2"class="library_AccordionPanelTab"
onclick="accordionSetSelectedTabCookie('_accordion_library',1)"><h3>Add
Custom PDF</h3></div>
<div id="library_AccordionPanelContent_2"
class="library_AccordionPanelContent">
fff
<input type="checkbox" name="AddToLibrary" value="1"
onclick="effect.start();resizePanel()">Add upload to Library?
<div>
<div id="AddToLibraryDiv" align="left"
style="visibility:hidden;display:none">
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
<p>blah blah blah</p>
</div>
</div>
<script type="text/javascript">
var effect = new Spry.Effect.Squish("AddToLibraryDiv",{from:
"0%", to: "100%", duration: 100, toggle: true, fps: 90,
scaleContent: false});
function resizePanel(){
document.getElementById('library_AccordionPanelContent_2').style.height="auto";
document.getElementById('library_AccordionPanelContent_2').style.display="block";
document.getElementById('library_AccordionPanelContent_2').style.visibility="visible";
</script>
</div>
</div>
</div>
<script language="JavaScript" type="text/javascript">
var library = new
Spry.Widget.Accordion("library",{enableAnimation:true,steps:10,duration:200,defaultPanel: 0,useFixedPanelHeights:false});
</script>
</TD>
</TR>
</TABLE>
Thanks to all for any advice!
Marc E.

now this is interesting: it appears that the problem is in
the construction of the effect widget. if I do this:
<input type="checkbox"
onclick="startIt();resizePanel();">check me
<script>
function startIt(){
new Spry.Effect.Squish("AddToLibraryDiv",{from: "0%", to:
"100%", duration: 200, toggle: true, fps: 90, scaleContent:
false}).start();
function resizePanel(){
document.getElementById('library_AccordionPanelContent_2').style.height="auto";
document.getElementById('library_AccordionPanelContent_2').style.display="block";
document.getElementById('library_AccordionPanelContent_2').style.visibility="visible";
</script>
Then the div will show up. now, the behavior is wrong in that
it never disappears because of the way i'm doing it. still, this at
least leads me to believe that showing/hiding the div inside of an
accordion inside of a table cell is possible. So I can't use the
constructor in the normal manner... question is, is there a way to
do it otherwise?
thanks all!

Problem with Accordion Widget INSIDE Sliding Panel Widget

Hello,
perhaps I should not do this, but I nested an Accordion
Widget inside a Sliding Panels Widget:
- There are eight Panels.
- Each one contains a complete Accordion.
The sliding works fine, and so does the Accordion animation,
but the text inside the Accordion Panel Tabs won't move along, when
a tab is activated. I need to hover the mouse over the accordion to
make the panel texts appear again.
Of course, when I un-nest the widgets and move the Accordion
widget out of the Sliding Panel widget, everything is fine.
My question is:
- am I demanding "too much" by nesting the widgets?
- or should this basically work, and the problem arises from
rivalling scripts?
Here is a link:
Nested
widgets Test
The horizontal top menu will activate the sliding panels, but
as of now only the leftmost menu item contains an Accordion (I know
the CSS does not look nice yet).
Is there anything I can optimise to get this to work?
Thank you so much,
Greetings, Jensen
Edit: The problem does NOT occur in Firefox, but in
Safari.

Hi John,
That is the expected behavior if the "Overlap items below" is unchecked. Please refer to the following link http://screencasteu.worldsecuresystems.com/aish/2013-08-21_1947.png. If you don't want the page to wiggle up and down, please check the box shown in the screenshot.
Regards,
Aish

Dashed rule between menu items nested inside an accordion panel widget in Muse?

I have a vertical menu widget nested inside an accordion panel widget and I want a dashed rule under each menu item. I already know I can have a solid rule by assigning a stroke to just the bottom of each menu item container.
I manually created dashed rules by "step and repeating" a 1px black square followed by 2px of space to a 380px width. I positioned these dashed rules under each menu item and grouped them with the menu. Then I placed the menu widget with the dashed rules into the content container for the accordion panel. The menu expands and collapses in the Preview mode but the dashed rules don't show up.
Muse CC 2014, iMac OS10.9

The link again is I forgot to add http to the link before, but it should have worked.
http://www.lipowiec.org/test/index.php
a) used Dreamweaver to create new site selected 1 column, elastic, centered, header, and footer
b) used spry to add horizontal menu to header
c) followed instructions from Spry Help
http://livedocs.adobe.com/en_US/Spry/SDG/index.html?lang=en_US ->
working with spry widgets -> working with the menu bar widget -> Customize the dimension of menu items as indicated
To change the dimension of menu items by changing the width properties of the menu item’s li and ul tags.
Locate the ul.MenuBarVertical li or ul.MenuBarHorizontal li rule.
Change the width property to a desired width, or change the property to auto to remove a fixed width, and add the property and value white-space: nowrap; to the rule.
Locate the ul.MenuBarVertical ul or ul.MenuBarHorizontal ul rule.
Change the width property to a desired width (or change the property to auto to remove a fixed width).
Locate the ul.MenuBarVertical ul li or ul.MenuBarHorizontal ul li rule.
Add the following properties to the rule: float: none; and background-color: transparent;.
Delete the width: 8.2em; property and value.
Under IE it's broken, under the other browsers it works.
There need to be more IE HACKS added.

Radio buttons inside Accordion tab?

So I upgraded to 1.6.1 and fixed my IE issues, but it broke
my radio buttons. On my page (
Here) I've
got radio buttons nested inside the accordion tabs. In the previous
version (1.4) everything worked fine, but after the upgrade they
don't stay checked when you click on them. Any ideas?
Thanks,
Rory

There is limited documentation on this, but you might want to use the table select phase listener.
You can see this in action in the following sample app: http://blogs.sun.com/roller/page/divas?entry=table_component_sample_project
You can read a bit about it here:
http://blogs.sun.com/roller/page/winston?entry=single_selectable_row_table_component

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.

Links inside an accordion menu

Hello, im almost done with my site, but i have encounterd a problem, I did an accordion menu for the main design, works perfectly, but inside one of the menus i have a gallery, ive tried diferent options, but my main problem is that every time i click any of the different button options ive created all my page scrolls to the top. Its like everything inside the accordion menu is making the page scroll back to the top! how can i disable that for the buttons inside the main accordion menu. Thank you.

Hello, the problem im having is in the mobile site. here are the two versions, english and spanish. You will ser the problem in the portfolio section under recent projects. The two versions have a diferente type of galery bit both have the same issue. Once you click any buttons under projects the page automatically scrolls up.
http://www.katapix.com/phone/
http://www.katapix.com/phone/inicio.html
im sorry for my bad english. I hope i made my point clear. Thank you for the help!

Spry Effect Inside Accordion

I've come across a little hiccup when using a Spry Effect inside an Accordion. I am creating a survey page with one question per accordion tab. Some of these questions have sub-questions based on a yes or no answer.
I was able to use an onclick with a radio button to open a Spry Effect that will display more questions. The problem is that these questions are normally hidden and when the accordion renders it passes over the hidden content and ignores it when it is time for the onclick event to display them.
I was able to get it to work with one set by making the accordion open to that tab by default first (which renders the content) and then hides the sub-questions. The Spry Effect then calls a javascript function to open the fist accordion tab using the setup trigger.
But this doesn't seem to work for multiple Spry Effects on different tabs... am I missing something?
I have a demo page here (click "yes" on question 3) -- http://tv.swirelive.com/survey/demo_survey.php

Ok. I figured it out. I had to define the Spry Effects first and then the Accordion last.

Accordion inside flex datagrid

Trying to put an accordion inside a datagrid where the header has typical datagrid functionality on each set of columns. Each accordion has a seperate dataset inside. Is thi possible using rendering or will I have to build custom set of functions to have it behave like a datagrid with colun sorting, dragging, etc.

Basically I am looking to have one main header that controls six accordions, each with data from the same souce but filtered dynamically. The main header should still be able to be sorted and arrangable like a typical datagrid based on what accordion panel is currently open. I can provide a mock-up of what i want it to look like if this still is not clear. Its basically one datagrid header that can control 6 seperate datagrids(without headers) while being inside of an open accordion.

Accordion inside a scrollPane

I need to put an accordion in a scrollPane. The only way I
can figure out how to do it is to have an empty movieclip in the
library, then set that as the contentPath of my scrollPane and
creating an accordion inside.
The problem is that if my accordion has 2 or more children or
segments, there is a giant space after the accordion in the
scrollPane that I can't get rid of.
Here is my code:
import mx.containers.Accordion;
thisScroll.contentPath = "emptyMC";
scrollContent = thisScroll.content;
scrollContent.createClassObject(mx.containers.Accordion,
"my_acc", scrollContent.getNextHighestDepth());
thisAccordion = scrollContent.my_acc;
thisAccordion.createChild("", "panel1", "first panel");
thisAccordion.createChild("", "panel2", "second panel");
Can any body help?

I need to put an accordion in a scrollPane. The only way I
can figure out how to do it is to have an empty movieclip in the
library, then set that as the contentPath of my scrollPane and
creating an accordion inside.
The problem is that if my accordion has 2 or more children or
segments, there is a giant space after the accordion in the
scrollPane that I can't get rid of.
Here is my code:
import mx.containers.Accordion;
thisScroll.contentPath = "emptyMC";
scrollContent = thisScroll.content;
scrollContent.createClassObject(mx.containers.Accordion,
"my_acc", scrollContent.getNextHighestDepth());
thisAccordion = scrollContent.my_acc;
thisAccordion.createChild("", "panel1", "first panel");
thisAccordion.createChild("", "panel2", "second panel");
Can any body help?

Using Accordion Style text inside Flash

Looking for some ideas on how I could have text object with a link inside to display the information below the link still inside the text object. My thoughts were to use an html file inside the text object and have links that would display an accordion like text below the link. Before I start venturing in this direction, thought there may be a better approach?
Basic concept: Paragraph of text, inside the paragraph a link. When clicked the additional text appears below the link and the rest of the text pushes down, musch like an accordion style panel.
Look inside SPRY and there is nothing there.
Any ideas?
THANKS

That's because it's probably stripping the characters it doesn't like, such as HTML and formatting. Your best strategy at that point is to convert it before you send it through your script so your script tolerates it. You can try the encode() function run on your string which will URL encode it and the decode() function can restore it. Otherwise you need to replace anything your script doesn't like with something else intentionally. e.g. turn <i>italics</i> into [i]italics[/i] and then later fix it.
I myself would look at what PHP is doing. Chances are it's running the striptags function. It's just a safety measure to stop SQL injections (make code safer). But that may not be what you want. If you're at all uncomfortable with that, you'd best not do it though. You take the risk someone will sneak something in that you do not want.

Form submit inside an accordion panel

Hi,
i have a form inside an accordion panel content. i would like
the submitted data to hit a php script for processing and then
refresh the accordion panel content with new data without
refreshing the page. This is the AJAX model and i was wondering if
it was possible with spry.
Thanks,
Dhimiter

Hi,
we have a function called updateContent that allows you to
change the initial data content for a html element.
You can add this function at onclick event to change the data
from the accordion panel with the new processed data.
To see an example of how this function works, please look at
this
sample
Hope this helps you,
Diana

Error while having a accordion inside tabs

Hi,
I'm using a menu composed of tabs. In one of the tabs there is a accordion. When I go through the accordion, It wont "update" the height of the tab.
I believe I should "refresh" the tab just after a action has been made in the accordion.
Could someone help me fix that issue please.
Thanks in advance
<li class="menuTab">
            <div class="menuTab">
                <a href="#tabs-1">
<div id="tabs-4">
     <div id="Accordion1">
     </div>
</div>
<script type="text/javascript">
     $(function() {
         $( "#Tabs1" ).tabs();
     $(function() {
         $( "#Accordion1" ).accordion();
</script>

Thanks for taking part in my post !
To answer Nancy, I post here below the source, hope you'll figure the issue.
Thanks Ben for your tip, it's already better, but still:
     the size (height) for the accordion in the tab will be defined by the space that the first "accordion-tab" needs.
What I'd like is that the tabs height, kind of refresh / adapt to its new content when an "accordion-tab" is selected.
Thank you
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="jQueryAssets/jquery.ui.core.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.theme.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.tabs.min.css" rel="stylesheet" type="text/css">
<link href="jQueryAssets/jquery.ui.accordion.min.css" rel="stylesheet" type="text/css">
<script src="jQueryAssets/jquery-1.8.3.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-ui-1.9.2.tabs.custom.min.js" type="text/javascript"></script>
<script src="jQueryAssets/jquery-ui-1.9.2.accordion.custom.min.js" type="text/javascript"></script>
</head>
<body>
<div id="Tabs1">
<ul>
    <li><a href="#tabs-1">Tab 1</a></li>
    <li><a href="#tabs-2">Tab 2</a></li>
    <li><a href="#tabs-3">Tab 3</a></li>
</ul>
<div id="tabs-1">
    <p>Content 1</p>
    <p> </p>
    <div id="Accordion1">
      <h3><a href="#">Section 1</a></h3>
      <div>
            <ul>
                <li>content 1</li>
                <li>content 1</li>
                <li>content 1</li>
                <li>content 1</li>
                <li>content 1</li>
                <li>content 1</li>
                <li>content 1</li>
                <li>content 1</li>
                <li>content 1</li>
                
            </ul>
      </div>
      <h3><a href="#">Section 2</a></h3>
      <div>
        <p>Content 2</p>
      </div>
      <h3><a href="#">Section 3</a></h3>
      <div>
              <ul>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
                <li>content 3</li>
              </ul>
      </div>
    </div>
    <p> </p>
</div>
<div id="tabs-2">
    <p>Content 2</p>
</div>
<div id="tabs-3">
    <p>Content 3</p>
</div>
</div>
<script type="text/javascript">
$(function() {
    $( "#Tabs1" ).tabs();
$(function() {
    //$( "#Accordion1" ).accordion();
    $( "#Accordion1" ).accordion({heightStyle: "fill"});
</script>
</body>
</html>

Accordion inside accordion?

Similar Messages

Maybe you are looking for