Accordion flexslider

Hello there,
I have used accordion flex slider from this site:
http://webcodebuilder.com/responsive-jquery-plugin-flexslider-feat-kwiks/.
Here is my site link:
http://bhc.edu.in/MATICS/
My system resolution is 1366 X 768.In desktop view it works like accordion slider without any navigation icons.When i shrink the window , the slider has nav icons and also prev and next controls.
I want the accordion model in tablet layout also.Please help me.

Hi ghaug,
This is due to the tabindex attribute that is on the
top-level element of the accordion. Apparently when an element is
focused in IE, it tries to make sure the top of that element is in
view, so it is "conveniently" scrolling it into view for you.
To prevent this behavior for accordions like yours that don't
fit neatly into a single screen, you are going to have to remove
the tabindex attribute from the top-level accordion element. If you
still want/need keyboard navigation of your accordion, then you
have to switch to using links in your accordion tabs. You can find
an example here:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#EnablingKey boardNavigationWithLinks
--== Kin ==--

Similar Messages

Accordion-Toggle Open and Close

I apologize if this has been covered before, but I checked
and couldn't find a solution. I'd like the accordion to toggle
between open and close the same panel. Right now, when I click on
it, it opens, but it doesn't close when I click on the same panel
again. Is there any way that can be achieved?

Don't you just want the :
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/collapsible_panel_sample. htm
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/collapsible_panel_sample. htm

I can not find (see) the Data Control Accordion

Hello all,
I cannot find (see) the Data Control Accordion, I just installed the Jdeveloper 11g (Oracle JDeveloper 11g (11.1.1.2.0) - November 2009) from this link http://www.oracle.com/technology/software/products/jdev/htdocs/soft11.html
I started a new ADF BC application, but I cannot find the data control accordion to drag and drop the components I created in the application model. Is there anything I must do after installation (post installation), is there any libraries need to be installed? Please, I need a help to create my application, I’m totally stuck, many thanks for any help.
Kind regards,
Nabil

Shay Shmeltzer wrote:
Can you post an image of your screen so we can see how it looks like?
If you delete the JDeveloper\system11.1.1.2.36.55.36 directory - does your IDE get back to the right way of displaying the data control?Hello,
Many thanks for your reply, kindly find attached screenshots for the two installation of Jdeveloper 11g I have (release 1 & 2), it shows clearly that the “Data Control” is available for release 1, but not available for release 2, even we are talking about the same application!
Regarding the “JDeveloper\system11.1.1.2.36.55.36”, I’m not sure if I have it (attached a list of directories installed), I was not able to find it under my installation directory, therefore I can’t answer your question, but please advise if it could be the reason, how I may have it, do you think there is something wrong with the installation? I noticed that some persons having the same problem before me, so what was wrong, and how they solve it? I appreciate any help please, many thanks.
Regards,
Nabil
P.S. regarding the attached files, sorry I don't know how to attach files to my reply (you may email me at [email protected] so I can send you the screenshots through email, if you please), any help regarding that too will be appreciated.
Directory     Location
o.adf-faces-query-and-lov-dt.11.1.1.2.36.55.36     E:\Oracle11MW\Middleware\jdeveloper\jdev\unit-tests\system11.0.0.0.0
o.adfdt.swingcore.11.1.1.2.36.55.36     E:\Oracle11MW\Middleware\jdeveloper\jdev\unit-tests\system11.0.0.0.0
o.adfm.11.1.1.2.36.55.36
o.adfm.11.1.1.2.36.55.36
o.BC4J.11.1.1.2.36.55.36
o.bm.11.1.1.2.36.55.36
o.css.11.1.1.2.36.55.36
o.diagram.javadoc.11.1.1.2.36.55.36
o.dynamic.faces.11.1.1.2.36.55.36
o.ide.11.1.1.2.36.55.36
o.j2ee.11.1.1.2.36.55.36
o.jdeveloper.11.1.1.2.36.55.36
o.jdeveloper.esdk.11.1.1.2.36.55.36
o.struts.11.1.1.2.36.55.36
o.struts.adf.11.1.1.2.36.55.36
o.xsqldt-ide.11.1.1.2.36.55.36

Spry Accordion doesn't work properly

I uploaded the site the other night and it worked out just fine. I made a change in some spacing between two words and added a letter to a word. Then all of the sudden it did not work on my next upload. The link to the page is http://www.tc.umn.edu/~aias/about.html#. I appreciate the time you put into solving this in advance!
The code of the page:
<!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>AIAS MN- About</title>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<link href="../SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body onload="MM_preloadImages('images/AIASMN_btn_over.gif','images/About_btn_over.gif','images /Events_btn_over.gif','images/FBD_btn_over.gif','images/Media_btn_over.gif','images/Profes s_btn_over.gif','images/Links_btn_over.gif','images/Donate_btn_over.gif','images/membershi p_btnover.png','images/centerbox_topboard_hover.gif','images/holly_engle_hover.jpg','image s/kelsey_reinke_hover.jpg','images/sohpia_skemp_hover.jpg','images/leanna_kemp_hover.jpg', 'images/nate_mckewon_hover.jpg','images/kamren_kubesh_hover.jpg','images/beau_sinchai_hove r.jpg')">
<div class="styles">
<div id="banner">
    <object id="FlashID" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="880" height="137">
      <param name="movie" value="banner_1.swf" />
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="6.0.65.0" />
      
      <param name="expressinstall" value="Scripts/expressInstall.swf" />
      
      
      <object type="application/x-shockwave-flash" data="banner_1.swf" width="880" height="137">
        
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="6.0.65.0" />
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        
        <div>
          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
        </div>
        
      </object>
      
    </object>
    <div id="main_nav"><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('aiasmn','','images/AIASMN_btn_over.gif',1)"><img src="images/AIASMN_btn.gif" name="aiasmn" width="93" height="43" border="0" id="aiasmn" /></a><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('about','','images/About_btn_over.gif',1)"><img src="images/About_btn.gif" name="about" width="68" height="43" border="0" id="about" /></a><a href="events.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('events','','images/Events_btn_over.gif',1)"><img src="images/Events_btn.gif" name="events" width="70" height="43" border="0" id="events" /></a><a href="fbd.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('fbd','','images/FBD_btn_over.gif',1)"><img src="images/FBD_btn.gif" name="fbd" width="156" height="43" border="0" id="fbd" /></a><a href="media_v2.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('media','','images/Media_btn_over.gif',1)"><img src="images/Media_btn.gif" name="media" width="68" height="43" border="0" id="media" /></a><a href="profession.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('profession','','images/Profess_btn_over.gif',1)"><img src="images/Profess_btn.gif" name="profession" width="100" height="43" border="0" id="profession" /></a><a href="links.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('links','','images/Links_btn_over.gif',1)"><img src="images/Links_btn.gif" name="links" width="62" height="43" border="0" id="links" /></a><a href="donate.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('donate','','images/Donate_btn_over.gif',1)"><img src="images/Donate_btn.gif" name="donate" width="75" height="43" border="0" id="donate" /></a></div>
    <div class="container">
      <div class="leftside">
        <div class="leftbox">
          <div class="leftbox_top"><img src="images/leftbox_topnews.png" width="185" height="21" /></div>
          <div class="leftbox_body"><a href="http://www.aias.org/website/article.asp?id=897" target="_blank">Grassroots</a><br />
            <a href="t_shirt.html">T-Shirt Contest</a><br />
          <a href="http://forum.aias.org/" target="_blank">Forum</a></div>
          <div class="leftbox_bot"><img src="images/leftbox_bot.png" width="185" height="11" /></div>
        </div>
      </div> </div>
      <div class="rightside">
        <div id="meeting_date">
          <div id="meeting_text">9/14/11</div>
          <div id="membership"><a href="membership.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('membership','','images/membership_btnover.png',1)"><img src="images/membership_btn.png" name="membership" width="152" height="38" border="0" id="membership2" /></a></div>
          <div class="rightimage_links"><a href="http://www.aia-mn.org/" target="_blank"><img src="images/aiamsm.gif" width="152" height="35" border="0" /></a><a href="http://www.design.umn.edu/" target="_blank"><img src="images/cdes.gif" width="152" height="53" border="0" /></a><a href="http://www.aias.org/website/article.asp?id=8" target="_blank"><img src="images/aias.gif" width="152" height="56" border="0" /></a><a href="http://www.facebook.com/pages/American-Institute-of-Architecture-Students-MN-Chapter/11650 4105979" target="_blank"><img src="images/facebook.gif" width="152" height="48" border="0" /></a></div>
        </div>
      </div>
      <div class="centerbox">
        <div class="low_nav"><img src="images/lownav_blank2.gif" width="535" height="21" /></div>
        <div class="centerbox_container">
          <div class="centerbox_box">
            <div id="centerbox_top"><img src="images/centerbox_topabout.gif" width="532" height="27" /></div>
            <div id="centerbox_body">
              <div id="centerbox_bodyinside">
                <strong class="lg_titlefonts">AIAS-MN</strong><br />
                AIAS Minnesota is a student group at the University   of Minnesota for anyone with an interest in Architecture. We hold   biweekly meetings where we invite influential speakers to come and   inform us about issues pertaining to architecture. We also attend local   events such as firm crawls, participate in design charrettes, and use   our design skills to help out community members in need through our   Freedom by Design team. AIAS Minnesota is part of a national group that   holds regional "quad" conferences twice yearly, and a national "forum"   held every year, over the weekend of New Year's Eve.<br />
                <strong><br />
                Mission:</strong>
                <ul>
                <li>To promote excellence in architecture education, training and practice.</li>
                  <li>To foster an appreciation of architecture and related disciplines.</li>
                  <li>To enrich communities in a spirit of collaboration.</li>
                  <li>To organize students and combine their efforts to advance the art and science of architecture</li>
                </ul>
                <span class="lg_titlefonts"><strong>Freedom By Design</strong></span><strong><br />
                </strong>Is the community service program for the AIAS Chapter at the University of Minnesota. We are a registered student group at the university.<br />
                  <br />
                  <strong>What we Do:</strong><br />
We utilizes our talents as design students to positively impact the lives of people in our community in need through modest design and construction solutions by addressing their struggles with thoughtful design solutions to provide them with safety, dignity, and comfort. While we serve any community members in the Twin Cities area in need, most of our work tends to deal with accessibility and safety issues for our low-income and disabled neighbors.<br />
<br />
<strong>Priority:</strong><br />
Our priority is improving the safety, dignity, and comfort of our community neighbors' living, learning, working, and playing environments through design.<br />
<br />
<strong>Group Members:</strong><br />
Any students (from any discipline) that are interested in positively enhancing the lives of their Twin Cities neighbors and community members are encouraged to join Freedom by Design and AIAS.
<span class="invis_text">.</span>
             </div>
            </div>
            <div class="centerbox_bot"><img src="images/centerbox_bot3.png" width="532" height="21" /></div>
          </div>
        <div class="centerbox_box">
          <div id="Accordion1" class="Accordion" tabindex="0">
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image20','','images/centerbox_topboard_hover.gif',1)"><img src="images/centerbox_topboard.gif" name="Image20" width="532" height="32" border="0" id="Image20" /></a></div>
              <div class="AccordionPanelContent"></div>
            </div>
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image21','','images/holly_engle_hover.jpg',1)"><img src="images/holly_engle.jpg" name="Image21" width="530" height="70" border="0" id="Image21" /></a></div>
              <div class="AccordionPanelContent"><strong>Contact: </strong>[email protected]<strong><br />
                Major/Minor: </strong>Bachelor of Science, Architecture/Sustainability, Psychology<br />
                <strong>Year in school:</strong> Senior<br />
                <strong>Hometown:</strong> Sauk Centre, MN<br />
                <strong>I enjoy: </strong>Architecture. Coffee. Food. Long walks on the beach. Books. Travel. Sleep. Tennis.<br />
                <strong>Best AIAS memory: </strong>I have too many. My best memories are yet to come because we're going to   Cincinnati (Fall Quad), Phoenix (Forum), and Detroit (Spring Quad) this   year!</div>
            </div>
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image22','','images/kelsey_reinke_hover.jpg',1)"><img src="images/kelsey_reinke.jpg" name="Image22" width="530" height="70" border="0" id="Image22" /></a></div>
              <div class="AccordionPanelContent"><strong>Contact: </strong>[email protected]<strong><br />
                Major/Minor: </strong>Bachelor of Design in Architecture/Spanish and Environmental Design<br />
                <strong>Year in school:</strong> Senior<br />
                <strong>Hometown: </strong>Stillwater, MN (go ponies?)<br />
                <strong>I enjoy: </strong>Coffee, kayaking, MN summer/fall, architecture, art, reading, dog-stalking at Calhoun, finding cool spots, and coffee.<br />
              <strong>Best AIAS memory:</strong> the masquerade ball from FORUM in Minneapolis 2010. And more to come this year!!</div>
            </div>
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image23','','images/sohpia_skemp_hover.jpg',1)"><img src="images/sohpia_skemp.jpg" name="Image23" width="530" height="70" border="0" id="Image23" /></a></div>
              <div class="AccordionPanelContent"><strong>Contact: </strong>[email protected]<strong><br />
                Major/Minor: </strong>Bachelor of Science, Architecture/Environmental Design<br />
                <strong>Year in school:</strong> Senior<br />
                <strong>Hometown: </strong>Minneapolis, MN<br />
                <strong>I enjoy:</strong> Lake Harriet, Lake Calhoun, running, coffee, family, friends, and of course architecture.<br />
              <strong>Best AIAS memory:</strong> New Years at McNamara.</div>
            </div>
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image24','','images/leanna_kemp_hover.jpg',1)"><img src="images/leanna_kemp_.jpg" name="Image24" width="530" height="70" border="0" id="Image24" /></a></div>
              <div class="AccordionPanelContent"><strong>Contact: </strong>[email protected]<strong><br />
                Major/Minor: </strong>Bachelor of Design in Architecture/Theatre Design<br />
                <strong>Year in school:</strong> Senior<br />
                <strong>Hometown: </strong>Wausau, WI<br />
                <strong>I enjoy: </strong>Painting<br />
              <strong>Best AIAS memory:</strong> New Years Eve masquerade at FORUM with AIAS!</div>
            </div>
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image25','','images/nate_mckewon_hover.jpg',1)"><img src="images/nate_mckewon.jpg" name="Image25" width="530" height="70" border="0" id="Image25" /></a></div>
              <div class="AccordionPanelContent"><strong>Contact: </strong>[email protected]<strong><br />
                Major/Minor: </strong>Architecture/Environmental Design<br />
                <strong>Year in school:</strong> Sophomore<br />
                <strong>Hometown: </strong>North Sioux City, SD<br />
                <strong>I enjoy:</strong> Running, golfing, meeting new people, spontaneous activities, and the little things in life.<br />
              <strong>Best AIAS memory:</strong> 2011 spring quad trip to carbondale, IL.</div>
            </div>
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image26','','images/kamren_kubesh_hover.jpg',1)"><img src="images/kamren_kubesh.jpg" name="Image26" width="530" height="70" border="0" id="Image26" /></a></div>
              <div class="AccordionPanelContent"><strong>Contact:</strong> [email protected]<br />
                <strong>Major/Minor: </strong>Bachelor of Design in Architecture/Environmental Design<br />
                  <strong>Year in school:</strong> Junior<br />
                  <strong>Hometown:</strong> St. Cloud, MN<br />
                  <strong>I enjoy:</strong> Design, Architecture, Rowing, Soccer, Soccer, and other outdoor activities.<br />
                <strong>Best AIAS memory:</strong> Spring Quad at Carbondale!</div>
            </div>
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image27','','images/beau_sinchai_hover.jpg',1)"><img src="images/beau_sinchai_.jpg" name="Image27" width="530" height="70" border="0" id="Image27" /></a></div>
              <div class="AccordionPanelContent"><strong>Contact: </strong>[email protected]<strong><br />
                Major/Minor: </strong>Bachelor of Design in Architecture/Arts<br />
                <strong>Year in school:</strong> Junior<br />
                <strong>Hometown:</strong> Trat, Thailand<br />
                <strong>I enjoy:</strong> Trying new food<br />
              <strong>Best AIAS memory:</strong> Decorating cookie with my AIAS mentor, Joel, during the first AIAS mentor/mentee meeting. Our cookie won the third place.</div>
            </div>
          </div>
          <div class="Accordion"><img src="images/centerbox_bot4.jpg" width="532" height="21" /></div>
        </div>
        </div><div class="bottom_nav">
          <p> </p>
          <p><a href="index.html">AIASMN</a> | <a href="about.html">About</a> | <a href="events.html">Events</a> | <a href="fbd.html">Freedom By Design</a> | <a href="media.html">Media</a> | <a href="profession.html">Profession</a> | <a href="links.html">Links</a> | <a href="donate.html">Donate</a></p>
        </div>
      </div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Let me put it another way.
open the page in FF
right-click within the document and choose View Page Source
in the pop-up window, click ../SpryAssets/SpryAccordion.js
You will see
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML 2.0//EN">
<HTML><HEAD>
<TITLE>404 Not Found</TITLE>
</HEAD><BODY>
<H1>Not Found</H1>
The requested URL /SpryAssets/SpryAccordion.js was not found on this server.<P>
<HR>
<ADDRESS>Apache/1.3.37 Server at www.tc.umn.edu Port 80</ADDRESS>
</BODY></HTML>
This means that the document cannot be found.
I could also put it another way by translating ../SpryAssets/SpryAccordion.js as http://www.tc.umn.edu/SpryAssets/SpryAccordion.js
click on the latter and see what happens
now click on http://www.tc.umn.edu/~aias/SpryAssets/SpryAccordion.js
Gramps

Accordion not showing up at all in IE6

I have a standard accordion set up at
www.taradeal.com/pow.html
and it works fine in Safari and Firefox, but does not show up at
all in IE6 (the initial load of the text bits flashes up, but the
Spry re-work of the code seem to fail). I'm using Spry 1.6.1,
freshly updated for DW CS3.
The accordion display a standard RSS XML.
Here's some code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN">
<html>
<head>
<meta content="text/html; charset=iso-8859-1"
http-equiv="Content-Type">
<link rel="alternate" type="application/rss+xml"
title="RSS" href="pow-rss.xml">
<script src="SpryAssets-xpath.js"
type="text/javascript"></script>
<script src="SpryAssets-SpryData.js"
type="text/javascript"></script>
<script src="SpryAssets-SpryAccordion.js"
type="text/javascript"></script>
<script type="text/javascript">

</script>
<link href="SpryAssets-SpryAccordion.css" rel="stylesheet"
type="text/css">
</head>
<body>
... some table code
<div id="poems" spry:region="powrss" align="left">
<div id="Accordion1" class="Accordion" tabindex="0" >
<div class="AccordionPanel" spry:repeat="powrss">
<div class="AccordionPanelTab">{title}</div>
<div
class="AccordionPanelContent">{description}</div>
</div>
</div>
<script type="text/javascript">

</script>
</div>
...some more simple display, and a Google tracker
</body>
</html>
Thanks for any pointers on what's wrong.
-dan

Well, it seems to be a bug in the handling of the XML file
contents. I fixed it by changing the code in SpryData.js to force a
"manual" parse of the XML code. Not a good solution, but I don't
know the codebase well enough to find the root of the problem. I
know that the firstChild.nodeValue is "Object required" but I can't
figure out who sets that and why. Maybe no ActiveX object?
http://www.taradeal.com/pow2.html
still broken in IE6 if you want to check it
http://www.taradeal.com/pow.html
uses changed code and dynamic-data accordion works
Spry.Data.XMLDataSet.prototype.xhRequestProcessor =
function(xhRequest)
// XMLDataSet uses the responseXML from the xhRequest
var resp = xhRequest.responseXML;
var manualParseRequired = true; /*** DC for IE6 **/

Problem with accordion widget flashing open and shut when page loads

why is it that my accordion widget flashes open and shut when the page is loading (see http://vincentballmusewebsite2013test.businesscatalyst.com/digital-illustration.html#.UVDr Ehx7JyII) have tried everything to solve this, and Adobes customer service is terrible they don't get back to you when they say they will.
Please help me someone,
Thanks

Thank you Zak for your help, I spent 5 hours going round in circles trying to fix that problem and that's all I needed to hear, a bit of honesty and integrity.and yes, Adobes terrible customer service has still not got back to after promising 2 level technical support to contact me last Monday, I wish there'd keep their promise
Pamela, did you try my test website or my own website and if so my own has now no accordion widget on it and my test website may need you to try loading a few times to see if it really works or not, sometimes it does actually work even on a pc but most times not.
thanks for you help too.

Accordion Panel Widget - open and close speed.

Hello,
Is there any way to change the speed that an Accordion Panel Widget opens and closes?
I would like it to be slower than it is now.
For my project it would be more relaxed and graceful.
Thanks,
Chris.

HI Chris
With Accordion we cannot setup the speed as of now , but you can try out composition widget where we can define transition, auto play speed.
Thanks,
Sanjit

[Accordion] Open and Close Panel

http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html
They look at the example "Starting with All Panels Closed",
double click in
"Panel 1" (open/close).
How to make this?
I have Spry 1.5 (DW_CS3), my code is identical to the
example, but it does
not close.

By yes you mean that you copied the files or that you have an
URL? :)
Could you please make sure that you don't have a browser/web
server/proxy server cache problem? Try to open in the browser the
JavaScript directly and on top you should see the Spry pre-release
version 1.5. This behavior of the accordion didn't exists in Spry
1.4 and when the -1 option was used an JavaScript error message
appeared.
We need to see a link to the page to see why the page is not
working because we don't know to duplicate this issue localy. If
the information on the page is more sensitive you can contact
either Kin or me using the private messages from the forum.
Cristian

Programmatically Open and close panel accordion on button click

Hi All,
Im using JDev 11.1.1.4 and adf faces application.
My requirement is to open/close panel accordion on button click programmatically.Kindly have a look at below figured one
Panel accordion Open Button
| ShowDetail1 //Consider first one is open inside close button is there to close this pane..
|
|
|
Close Button
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Show detail2 open button
Show details3 open button
Any idea...
Thanks,

Thanks Mr.frank...
But disclosed property is to make the showdetail to disclose or not.. but requirement is to open panel accordion on button click
By default using panel accordion have arrow icon in left to open in a same way if i open the second one, first will get close automatically...
Actually is there any way to do the default process (open/close) programmatically...

Globally open and close all accordion panels

Is there a way to globally open and close all accordion
panels? For example, it would be nice to have an "Expand all" and
"Collapse all" link at the top of the page, before the accordion,
that has this functionality.

Hi FM_n_DC,
Accordions can only ever have a single panel open. If you
want individual control over which panels are open you probably
want to use a CollapsiblePanelGroup. This sample shows how to open
all and close all of the panels of the CollapsiblePanelGroup:
http://labs.adobe.com/technologies/spry/samples/collapsiblepanel/CollapsiblePanelGroupSamp le.html
--== Kin ==--

Spry: Accordion does not close properly

Hi Everyone,
I am very new to web design, so bear with me please.
I created a new website using Dreamweaver and added a spry accordion to use as a menu. it seemed to be working fine, but as I was adding links into the boxes it quit working on me. I have thoughts of restarting, but I thought that you may be able to help me here as well. The link to the website is http://www.blakesprairiefair.com/2009.html
I used images for the tab titles and they should all be uploaded, I shoud haver 5 tabs in the accordion but it only shows one   I am attaching how it looked a few keystrokes ago. I can't figure out why it is acting so oddly
If you need more from me let me know,
Thank you so much for any help
Chuck

Hey, Thanks for the tip. I looked through the code like 5 times and I can't seem to find any unclosed or extra Divs I attached the code below in case that helps.
I got the code for the defaultPanel: -1 from http://livedocs.adobe.com/en_US/Spry/1.4/help.html?content=WS0E55F588-24EC-4dd3-9508-82132 4E7F133.html
- Still haven't found the error
Thanks
Chuck
<!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>
<link href="_css/NewWebpage.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
</head>
<body class="oneColElsCtr">
<div id="container">
<div id="mainContent">
<div id="UpperLeftSpacing"></div>
<div id="UpperRightTitle"></div>
<div id="LowerLeft4NavBar">
    <div id="NavBar">
      <div id="SmallerNavBar">
        <div id="Accordion1" class="Accordion" tabindex="0">
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-Home.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent"><em><a href="http://www.blakesprairiefair.com">Home</a></em></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-09Events.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent">
            <p><em><strong><a href="http://www.blakesprairiefair.com/index_files/ScheduleofEvents.htm">Events Schedule</a></strong></em><a href="http://www.blakesprairiefair.com/index_files/ScheduleofEvents.htm"></a></p>
              <p><em><strong>Friday Night :</br>
              <br>     <a href="http://www.blakesprairiefair.com/index_files/DemoDerby.htm">Demo Derby</a></strong></em><em><strong></em></p>
              <p><em><strong>Saturday:</br>
                <br>    <a href="http://www.blakesprairiefair.com/index_files/JudgingSchedule.htm">Judging</a></strong></em></br>
                <br>    <a href="http://www.blakesprairiefair.com/index_files/CombineDemoDerby2009.htm">Combine Derby</a></em></p>
              <p><em><strong>Sunday:</br>
                <br>    <a href="http://www.blakesprairiefair.com/index_files/TractorPull.htm">Tractor Pull</a></em></p>
            </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-09Docs.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent">
              <p><em><strong><a href="http://www.blakesprairiefair.com/2009FairBook.pdf">09 Fair Book (pdf)</a></strong></em></p>
              <p><em><strong><a href="http://www.blakesprairiefair.com/index_files/Page396.htm">09 Documents</a></strong></em><a href="http://www.blakesprairiefair.com/index_files/Page396.htm"></a></p>
            </div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-Contact.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent"><strong>Content 5</strong></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-Links.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent"><strong>Content 6</strong></div>
          </div>
          <div class="AccordionPanel">
            <div class="AccordionPanelTab"><img src="Pix/T-Past.jpg" width="175" height="22" /></div>
            <div class="AccordionPanelContent">
              <p>2007</p>
              <p>2008</p>
            </div>
          </div>
</div>
        <div id="Cover">
          <p align="center"><img src="2009Cover.jpg" width="185" height="302" /></br>
          <br>Cover Designed By:</br>
          <br>Andrea Pagenkopf</br>
          <br>Rolling Rockets 4-H</p>
        </div>
      </div>
    </div>
</div>
<div id="MainContentBox">
    <div id="BoxForText">
      <p align="center">Welcome to the new</p>
      <p align="center"><strong>Blake's Prairie Jr. Fair </strong></p>
      <p align="center">Webpage</p>
      <p align="center"> </p>
      <p align="center"><strong><em><u>News:</u></em></strong></p>
      <p align="center"><em>Buttons for 2009 are on sale now! </em></p>
      <p align="center"><em>Visit local businesses or contact your local 4-H Club or FFA </em>Chapter to purchase one today.</p>
      <p align="center"> </p>
      <p align="center"><strong><em><u>Updates:</u></em></strong></p>
      <p align="left"><em>7/10/2009</em> - New Homepage</p>
      <p align="left"><em>5/20/2009</em> - <a href="http://www.blakesprairiefair.com/2009FairBook.pdf">2009 Fair Book</a> Added to Site</p>
    </div>
</div>
<div id="BottomBox"></div>

</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Open an accordion widget in the closed state?

I have searched the forums but have yet to find a resolution
for this issue. I am using an accordion widget and would like for
all of my panels to appear closed when the page initially loads.
Only once the user has clicked the tab do I want the panels to
open. Any suggestions that do not require me to buy a separate plug
in? Thanks.

This is directly from the Adobe documentation:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#AllPanelsCl osed
However, one thing to keep in mind is that this is assuming
that you are using the 1.6.1 update (as that is what the references
refer to). If you have never updated your Spry this would be a good
opportunity to do so. The below is the to the official Spry
homepage. There you will find the update package which includes
some samples and an Extension. Install the extension and restart
DW. Then under the Sites menu you will see a new option to update
Spry. Run that script and your Spry will be updated. Also on that
homepage is a link to the official Spry forums:
http://labs.adobe.com/technologies/spry/home.html

How do I make my accordion spry not "jump" or "hiccup" in IE??

Ok, sorry you guys, I'm a newbie.
It seems that no matter what I do, I can't get the accordion to co-operate with Internet Explorer. It has always jumped when tabs are clicked and then settles down. It's rather irritating and I would like to fix it. I've run out of things to try. Can anyone help?
In addition, with attempts to make keep the accordion and background centered I used a div with the position centered, which worked, but only in FF and Chrome. In IE it stays far left. When I had it in a table, I could set a left: px in the class, but never figured out how to center it with a table so it would change position based on the monitor resolution. If there's a better way to do this that IE and other browsers like, please help me. If it's just IE that has the problem is there any way to make it like my code?
If you can help me change the height of the accordion, that would be great. It seems it doesn't want to stretch out, but maybe I'm writing it in the wrong section or the wrong way.
Another minor issue is the IE not doing the transparency I set on the tabs. I heard that they took that feature out. Is that true or is there a way to set it for IE?
Here's what I have so far:
+<!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>Bonnie Praymayer</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>
<body>
<table id="big">
    <tr>
     <td><table width="200" border="1" id="table" name="table">
       <tr>
         <td><div id="Accordion1" class="Accordion" tabindex="0">
           <div class="AccordionPanel">
             <div class="AccordionPanelTab">
             <span class="tabContent">Benefiting People Like You
             </span>
             </div>
             <div class="AccordionPanelContent">
                   <div class="panelContent">
                 <p >I specialize in deep tissue massage. As you may know already, massage therapy is the manipulation of soft tissue with the goal to improve well-being and heal injuries. It can involve just about any part of the body, but generally most people have stiffness and injuries in the back and neck. I enjoy using this type of health maintenance to assist people like you. Massage therapy can be used to improve many ailments such as:</p>
                 <p >Muscle Strains, Sprains, Headaches, Migraines, Fibromyalgia, Edema, and High Blood Pressure</p>
                 <p >Beyond "ailments" massage is excellent for treating sore muscles in pregnant women as well as reducing stress in everyone.</p>
                 <p > </p>
               </div>
             </div>
           </div>
           <div class="AccordionPanel">
             <div class="AccordionPanelTab">
                 <span class="tabContent"> Reflexology - An Added Benefit
                 </span>
             </div>
             <div class="AccordionPanelContent">
               <div class="panelContent"><p >In addition to massage therapy, I am certified to practice Reflexology of the feet. This is a therapy wherein pressure is applied to the feet to encourage the body to heal itself. It's as if the feet are a map to the body with the spine being the edge of what is known as the arch. There are key points such as the heart and lungs, sinuses, kidneys, and intestinal tract. </p>
               <p> </p>Reflexology has been known to also be an indicator to hidden health issues. Many reflexologists can attest to the fact that upon finding sore areas in the feet, the corresponding organ(s) have later been discovered by a physician to be injured or diseased. It is not a replacement for healthcare, but for some, reflexology has proven to be an asset to gain knowledge of the workings of their body.<p></p>
               <p >One thing to note: if you do receive a reflexology treatment it is normal to feel a little dizzy, fatigued, or flu-like if you don't hydrate yourself before and after.</p>
            </div>
             </div>
           </div>
           <div class="AccordionPanel">
             <div class="AccordionPanelTab">
                     <span class="tabContent"> How to Choose a Therapist
                     </span>
             </div>
             <div class="AccordionPanelContent">
               <div class="panelContent"><p >To be honest, everyone has preferences for what he or she like in a massage, so there is no hard and fast rule. What I recommend is that you decide what you need treated whether it be muscle strain, stiff muscles, stress, poor circulation etc. You can decide what kind of massage you need based on what you decide you want massage to do for you.</p>
               <p >If you need to de-stress, relax and do not have many sore stiff muscles then simple relaxation massage would be good for you. If you have a constant sore shoulder or neck then you really need a therapist that is capable of effectively loosening those fibres.</p>
               <p >You may be able to determine if a therapist is right for you by talking with someone who has had a massage from that person. Otherwise, you can sometimes judge by the type of facility in which they are practicing. Typically a spa is going to give you strictly relaxation, although many therapists are capable of more if you request it. A chiropractor's clinic will often focus on rehabilitation of injured patients; more often than not they have massage therapists that are more than capable of working deep enough to affect injured tissue.></p>
               <p > Communication is the key when it comes to during the treatment in order to customize and optimize your massage experience. Don't be afraid to speak up if you need to adjust the technique or pressure. After all, the massage is all about you!</p></div><p></p>
             </div>
           </div>
           <div class="AccordionPanel">
             <div class="AccordionPanelTab"><span class="tabContent">My Practice</span></div>
             <div class="AccordionPanelContent">
                 <div class="panelContent">
               <p>My interest in massage therapy began at a very early age. Although I didn't know it was an actual profession, I started massaging at the age of 8 as I did my best to alievinate my mother's chronic pain from fibromyalgia. I, through time gained a natrual feel for detecting prolblem areas in the muscle and I learned what pressure is appropriate. </p>
               <p>I took my training in 2006 at the Alberta Insitute of Massage for six months to earn a certificate for a 1100 hour program. Though short, it was intensive in the anatomy and physiology portion and very hands-on in the massage classes. It was my privilege to learn from three instructors who had more than 10 years experience as massage therapists and many years teaching it.</p>
               <p>Since my training, I have had the opporutinty to work as a massage therapist for 3 years. I have treated people from all walks of life for countless ailments and injuries. It is my pleasure to do my utmost to see to it that each paitent recieves the treament they deserve and expect.</p>
               </div>
             </div>
           </div>
         </div></td>
       </tr>
     </table></td>
    </tr>
</table>
<script type="text/javascript">

</script>
</body>
</html>
@charset "utf-8";
/* CSS Document */
body {
    background-image:url(../Images/WaterLeaf_Exp.png);
    background-repeat: no-repeat;
    background-position:center;
    background-attachment:scroll;
    background-color:#222222;
.panelContent {
    color: #dcd2d2;
    font-size: 14px;
    font-family: Verdana, Geneva, sans-serif;
    margin-left: 15px;
    margin-top: 20px;
.tabContent {
    color: #333;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #000;
    padding: 15px;
#big {
    /*background-image*/
    background-repeat:no-repeat;
    border: none;
    top: 0px;
    margin-left: 23.5%;
    position: static;
    height: 800px;
    width: 955px;
#table {
    width: 700px;
    height: 290px;
    /*margin-top: 1%;
    margin-left: 125px;*/
    border: none;
    position: relative;
    z-index: 2;
@charset "UTF-8";
/* SpryAccordion.css - version 0.4 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* This is the selector for the main Accordion container. For our default style,
* we draw borders on the left, right, and bottom. The top border of the Accordion
* will be rendered by the first AccordionPanelTab which never moves.
* If you want to constrain the width of the Accordion widget, set a width on
* the Accordion container. By default, our accordion expands horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style the
* Accordion container.
.Accordion {
    border-left: solid 1px gray;
    border-right: solid 1px black;
    border-bottom: solid 1px gray;
    overflow: hidden;
/* This is the selector for the AccordionPanel container which houses the
* panel tab and a panel content area. It doesn't render visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel container.
.AccordionPanel {
    margin: 0px;
    padding: 0px;
/* This is the selector for the AccordionPanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel tab container.
* NOTE:
* This rule uses -moz-user-select and -khtml-user-select properties to prevent the
* user from selecting the text in the AccordionPanelTab. These are proprietary browser
* properties that only work in Mozilla based browsers (like FireFox) and KHTML based
* browsers (like Safari), so they will not pass W3C validation. If you want your documents to
* validate, and don't care if the user can select the text within an AccordionPanelTab,
* you can safely remove those properties without affecting the functionality of the widget.
.AccordionPanelTab {
    background-color: #FFF;
    /*border-top: solid 1px black;*/
    border-bottom: solid 1px gray;
    margin: 0px;
    padding: 2px;
    cursor: pointer;
    -moz-user-select: none;
    -khtml-user-select: none;
    filter:alpha(opacity= 30);
    opacity: 0.3;
    -moz-opacity:0.3;
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
    overflow: auto;
    margin: 0px;
    padding: 0px;
    height: 200px;
/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "AccordionPanelOpen" is programatically added and removed
* from panels as the user clicks on the tabs within the Accordion.
.AccordionPanelOpen .AccordionPanelTab {
    /*background-color: #cccccc;*/
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.AccordionPanelTabHover {
    color: #93C;
    filter:alpha(opacity= 50);
    opacity: 0.5;
    -moz-opacity:0.5;
.AccordionPanelOpen .AccordionPanelTabHover {
    color: #cccccc;
    filter:alpha(opacity= 30);
    opacity: 0.3;
    -moz-opacity:0.3;
/* This is an example of how to change the appearance of all the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab:hover {
    background-color: #FFF;
    filter:alpha(opacity= 20);
    opacity: 0.2;
    -moz-opacity:0.2;
.AccorrdionPanelOpen:hover {
    filter:alpha(opacity= 90);
    opacity: 0.9;
    -moz-opacity:0.9;
    color:#F00
.AccordionPanelOpen .AccordionPanelTab {
    background-color: #390;
    filter:alpha(opacity= 30);
    opacity: 0.3;
    -moz-opacity:0.3;

You would make this a little easier if you posted a link to the page.
Most of the jump seems to be some extra padding or margin between the tabs when you rollover, but I am not able to find it. Is there any other css that is governing this page? I did remove a couple of <p></p> set of tags you had and it improved the jump, but it is still there.
If the page is live, run it through the validator http://validator.w3.org/ , fix whatever errors it finds, if you still have the jump, post a link to the page and the issue might get found.
Gary

Accordion click to open and close bar

Is there a way to click the bar and have the accordion close
it? IOW, I'm looking for a way to close all bars once a bar is
open. Thanks in advance.

Hi Rixon,
The feature you ask is already implemented for the next spry
release. On spry 1.4 this behavior is not working, but it will be
available soon on the 1.5 spry release.
If you want, you can try also the Collapsible Panel Group
widget from here:
http://labs.adobe.com/technologies/spry/preview/samples/collapsiblepanel/CollapsiblePanelG roupSample.html
Maybe the implementation of this widget fits with your needs
until you have the latest Accordion.js file
Diana

Spry Accordion - Tabs open and then close after page loads

I am using a Spry Accordion menu driven from a database.
The menu opens up during the page load and then closes.
I'm using SpryAccordion.js 1.6.1
And to open a preset tab, I'm using:
<script type="text/javascript">

</script>
But, all of the tabs open and then close on page load.
My page:   http://www.texashotjobs.us/00C01.aspx
Any fix for this??
Thanks, Ron

Well to both thanks. Actually I wasn't disappointed as I had a two part question...
I tested the 1.6 JS and remembered that I had to modify the 1.4 so that tabs actually would link. So I reverted back to 1.4.
So, going to 1.6 fixed the open panel on load but "unfixed" the panel tab from linking.....
So changing this in the 1.6 js fixed the link issue as well:
Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel)
    if (panel != this.currentPanel)
        this.openPanel(panel);
    else
        this.closePanel();
    if (this.enableKeyboardNavigation)
        this.focus();
//    if (e.preventDefault) e.preventDefault();
//    else e.returnValue = false;
//    if (e.stopPropagation) e.stopPropagation();
//    else e.cancelBubble = true;
I t appears everything is working........
Thanks, Ron Gaddis
Visual Reality Productions

Accordion flexslider

Similar Messages

Maybe you are looking for