Open specific tab in an accordion

I have an accordion with 5 tabs. I want to open a specific
tab depending on which link is clicked on the first tab.
I have the following, which opens tab 2:
<a
href="javascript:acc1.openNextPanel();">{@atitle}</a>
and I could use openLastPanel() for tab 5, but how do I open
tabs 3 and 4?
I have found a query from Auroras giving a function to do
this, but I would have expected this to be an inbuilt solution -
has it been incorporated into 1.5?
Regards
John

To answer my own question (partly...), I have added the
following into my SpryAccordion.js file:
quote:
JBB 13/4/07
Spry.Widget.Accordion.prototype.openPanelNumber =
function(numbr)
var indx = numbr - 1 // panel index starts at 0
var panels = this.getPanels();
var curPanelIndex = this.getCurrentPanelIndex();
if( panels && curPanelIndex != indx && indx
< panels.length && indx >= 0 )
this.openPanel(panels[indx]);
-------------------------------------------------------------- END
Call this from anywhere you like (eg <a
href="javascript:acc1.openPanelNumber('2');">{@atitle}</a>).
The number is 'natural' rather than 'logical' - ie the first tab is
number 1, the second is 2, etc. Quote marks are optional
(javascript will just cast the string into an integer) and invalid
values are ignored.
Regards
John

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

  • Open specific tab page using button

    Hello,
    How can I make that one button open specific page on tab.
    That page was disabled and I menaged to make my program to show this page when I click one button. So next step would be that by clicking on that button this (previously disabled - unvisible) page is automatically OPENED.
    Solved!
    Go to Solution.

    Chata,
    Use property nodes.  First, get the Pages references.  From that array select the specific page reference.  Then write Page Enabled to the Page Enabled property. After that write the value of the page to a local variable (if the tab is a control) or write the value directly to the terminal if the tab is an indicator.  Close references. 
    Lynn 

  • Open Specific Tabbed Panel using Querystring

    I am using the Tabbed Panel on my About page. I have created
    3 tabs within the Spry Tabbed Panel: company, history,
    testimonials. Each displays its respective content.
    On the main menu of my page I have 6 buttons. 3 of them
    (company, history and testimonials) link to this about page, but
    regardless of the menu item selected - only the first tab is
    displayed.
    I would like to use a querystring to pass a variable for the
    respective panel. Example: Company link = about.shtml?tab=0,
    Testimonials = about.shtml?tab=2
    I found this code, but am too much of a javascript newbie to
    know how to use it with a querystring:
    <script>
    var tp1 = new Spry.Widget.TabbedPanels("tp1", { defaultTab:
    2 });
    </script>
    Any help is greatly appreciated. Thank you ;-)
    -Scott

    Hi Scott,
    We just made a utility to make this easy for you:
    http://labs.adobe.com/technologies/spry/preview/samples/utils/URLUtilsSample.html
    The file is:
    http://labs.adobe.com/technologies/spry/includes/SpryURLUtils.js
    I made a working sample here:
    http://dbooth.net/spry/tp.htm
    You can see the code in the constructor:
    (params.panel ? params.panel : 0)
    That just says: if there is a querystring value, use that,
    otherwise, set the first panel as open.
    Note that Spry uses a zero based counting system, so the
    first Tab is '0', the second is '1'.
    Hope this helps,
    Don

  • Linking to a specific tab in a spry tabbed in Dreamweaver

    Hi,
    I used the following link in order to open specific tab from another page.
    http://foundationphp.com/tutorials/spry_url_utils.php
    Everything works fine in chrome but IE shows all of the tabbed info in one continuous list. Tried to fix it by using the suggested solutions in the below link, didn't work for me.
    https://forums.adobe.com/thread/826225
    Could you please help me out on this issue? Your help is very much appreciated.
    Thanks,

    Spry was abandoned by Adobe in late 2012.  Spry didn't keep up with the mobile web and modern browsers. You'll get better results with jQuery Tabbed Panels.
    Tabs | jQuery UI
    Nancy O.

  • Advice on linking to specific tabs in Accordion widget.

    Hi everyone, I have followed David Power's tutorial on linking to specific tabs in an Accoridion widget.
    I have got a test page working: http://fuelrecruitmenttest.co.uk/linktest.html which links to specific stories on my news page.
    My problem is, I'm adding news stories in the accordion panel, so the newest story goes on the top.
    Javascript counts the top panel as 0, the second panel as 1 etc etc.
    So if I was to add a new panel, any previous links I have to the top panel would be to the wrong story.
    My question is, Is there anyway of counting from the bottom panel up? Or any other workaround that people can think of eg: giving each panel a unique identifier so that the links remain the same even when new stories are added.
    Thanks!

    What is that?
    Murray --- ICQ 71997575
    Adobe Community Expert
    (If you *MUST* email me, don't LAUGH when you do so!)
    ==================
    http://www.projectseven.com/go
    - DW FAQs, Tutorials & Resources
    http://www.dwfaq.com - DW FAQs,
    Tutorials & Resources
    ==================
    "RedEyeBlind" <[email protected]> wrote in
    message
    news:gpcfeo$f31$[email protected]..
    > Hello anybody.
    >
    > I've tried the following still nothing but first tab.
    > ?tab=1#TabbedPanels1

  • One specific webites's zoom is too big how can I decrease the zoom. (the font is normal) If I open new tab for new site that's normal. Im using a laptop. THANKS

    One specific webites's zoom is too big how can I decrease the zoom. (the font is normal) If I open new tab for new site that's normal. Im using a laptop. THANKS

    Reset the page zoom on pages that cause problems: <b>View > Zoom > Reset</b> (Ctrl+0 (zero); Cmd+0 on Mac)
    * http://kb.mozillazine.org/Zoom_text_of_web_pages

  • How can I actually open multiple tabs of the same site, instead of performing the new "switch to tab" action?

    For example, sometimes I would like to open multiple tabs of Google Maps to get directions to multiple locations, and I haven't found a way to do so without open a new instance of the browser. Thanks.

    This one colors tabs, but the author warns that it doesn't work with other tab-related extensions, so you probably need to keep searching for one that does everything you want:
    https://addons.mozilla.org/en-US/firefox/addon/colorfultabs/
    If you don't find a do-it-all extension, you can modify the tab titles with a userscript that is specific to that website. This is because the tab displays the text designated in the page as its title.
    You either could "hard code" the list of words for each of the pages, or you could have a script extract information from the page, for example, the first main heading, or some other predictable bit of data. The script then would insert your preferred wording as the title of the page and Firefox will show that on the tab.
    To see how that appears, so you know whether it would be useful, you could do this experiment:
    On a web page that has useless tab text, open the Web Console using command+alt+k (Windows: Ctrl+Shift+k). In the line at the bottom next to the caret, paste the following code and press Enter:
    document.title="Magic!";
    If you decide you want a script written for this, you could try the request forum on userscripts''.''org:
    [http://userscripts.org/forums/2 Ideas and script requests - Userscripts.org]
    Although some people offer small payments, that usually isn't necessary to motivate people to help.
    Let me give you a brief warning about that site, though: over the past year, a lot of popular scripts were duplicated and reposted with additional code that hijacks your Facebook account. Be cautious when installing scripts, check the reviews, make sure there are no references to Facebook.

  • Open tab doesn't work when hitting the + or going to file, open new tab. automatic ones will work, but not manually.

    does not open tabs by hitting the + or by selecting file, open new tab. i am operating under mac os x software and have updated firefox twice now with no resolution to this issue.

    Many users have discovered this problem (in Firefox 30 and higher) is caused by Conduit add-ons, such as a Conduit plugin and/or a "Community Toolbar" extension.
    You can check for and disable extensions on the Add-ons page. Either:
    * Command+Shift+a
    * "3-bar" menu button (or Tools menu) > Add-ons
    (1) In the left column, click Plugins. Set nonessential plugins to "Never Activate".
    (2) In the left column, click Extensions. Then, if in doubt, disable.
    Often a link will appear above at least one disabled extension to restart Firefox. You can complete your work on the tab and click one of the links as the last step.
    Does that help with the "+" button? If so, could you name the specific plugin/extension that caused the problem?

  • Link to specific tab on another page but don't anchor

    Hello, I used this tutorial to link to a specific tab on another page:
    http://foundationphp.com/tutorials/spry_url_utils.php
    It works great, except I don't want to go directly to the tabbed panel. I want the particular tab to be active, but the page should load as it normally does. So the user should always be at the top of the page when it loads.
    This is the link code:
    <a href="registration.html?tab=1#form">
    As you can see, #form identifies the tabbed panel, but it also directs the link where to go. I only want to use it as an identifier, not as a navigator as well.
    Thank you.

    FShea31 wrote:
    Hello, I used this tutorial to link to a specific tab on another page:
    http://foundationphp.com/tutorials/spry_url_utils.php
    It works great, except I don't want to go directly to the tabbed panel. I want the particular tab to be active, but the page should load as it normally does. So the user should always be at the top of the page when it loads.
    This is the link code:
    <a href="registration.html?tab=1#form">
    As you can see, #form identifies the tabbed panel, but it also directs the link where to go. I only want to use it as an identifier, not as a navigator as well.
    Thank you.
    Remove the hash part of the URL parameter and just open the tab in the constructor
    <a href="registration.html?tab=1">
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1",
    {defaultTab: params.tab ? params.tab : 0});
    I hope this helps.
    Ben

  • IE9 problem linking to a specific tab

    I have been happy with my website for almost a year now after asking a few questions relating to Tabbed panels and having my problems solved here.
    But I've realised there is a problem that didin't exist before!
    I have a Horizontal menu bar at the top of some of my pages and there are links that go to different pages with a tabbed panel with a specific tab opened.
    However, when I click on these links, the pages open with the specific tabs opened, BUT the Horizontal menu bar which should be at the top disappears.
    The banners at the top left corner disappears too and the whole tab panel is displayed at the top.(so the Tabbed panels are kind of pushing the content at the top out of the screen)  When I check the html in Dreamweaver, in Live view, and try to use the link in the menu bar, it shows the same, the Tabbed panel at the top of the page with the specific tab opened.  But it shows that it can be scrolled up and when I do, it shows the banners and the Horizontal menu bar.
    This hasn't been happening before when I've made the website last year.  I'm thinking that it's something to do with IE9 because I was using IE8 when I've made the website and Safari seems to work the same as before.  Does anyone know what I could do?
    My website is http://minussun.co.uk/home.html
    If you could try jumping to "The Concept", "Her Record" or "Her Life" in the About menu or "Her" or "Stockists" in the Contact menu at the top (basically, the links which are aiming at specific tabs) you will see what I'm writing about...

    Hello, thank you for checking out.
    I'm using windows vista 32bit and never thought that the os matters as well.
    It's good to know that it works in the up to date os/browser environment.

  • Safari 3.0: How do I force all links to open in tabs without using cmd?

    In a number of other browsers it's easy to set all links to open in tabs. I don't want any separate windows to open and I don't want to have to use the keyboard to force every single link into a tab.
    How do I get Safari to do strictly tabbed browsing?
    Thanks,
    iMactel

    Before posting the very same question, I searched first (like a good boy should) and found your post....which addressed the exact question I have.
    I'm in the process (of hopefully) of transitioning from years of using Firefox to Safari. The reason: I'm amazed at how quickly web pages open in Safari compared to Firefox.
    Anyway, after installing a few Safari add-ons, I'm feeling pretty good about the transion -- except for the fact that I NEVER want Safari to open anything in a separate window unless I specifically ask it to. Evidently, it's simply not designed to do this...

  • My "Open New Tab" (tab with "x") to right of already open tabs is missing..

    '''I used to have the "Open New Tab" option (the small tab with an "x" to open new tab page) to the right of my already open tabs. I upgraded Firefox to newest version (12 maybe????....so many updates I can't keep up). This feature is gone as well as my Auto-Fill which were my 2 favorite features!!!'''

    Actually this tab deal wasn't a specific setting that I know of. When I first chose to use the multiple tabs at the top of my Firefox page.....there they were. No matter how many pages/tabs I opened there was always a new blank one on the right of the tabs. The newest one is the size of the tabs that are "pinned" rather than full sized. This is much harder to explain in writing....so don't know if I'm being clear at all.
    In the Toolbar Layout options there is an icon + that can be dragged to a toolbar, but it stands alone as opposed to being part of the tabs. I can click it to open another tab, but it's a 2 step process. I much preferred the other way.

  • Firefox does not open new tab

    I have been using Firefox 3.6 and it works quite well, except that a week ago it stopped opening new tabs (when you click on the + sign for new tabs). Cannot find any help in the Firefox help pages.
    (Before you tell me to upgrade to 4.0, I did that and it crashes at least once a day, which practically never happened with 3.6.)
    I'm using a Lenovo T510t and Windows 7

    Un-install the '''''Ask Toolbar''''' until Ask fixes the problem with their toolbar that is causing that issue.
    *http://support.mozilla.com/en-US/kb/Uninstalling+add-ons
    *http://support.mozilla.com/en-US/kb/Cannot%20uninstall%20an%20add-on
    <br />
    <br />
    '''You need to update the following.''' The Plugin version(s) shown below was/were submitted with your question and is/are out of date. You should update to avoid known security issues with the version(s) you have installed. Click on "More system info..." to the right of your question to see what was included with your question.
    *Next Generation Java Plug-in 1.6.0_24 for Mozilla browsers
    #'''''Check your plugin versions''''' on either of the following links':
    #*http://www.mozilla.com/en-US/plugincheck/
    #*https://www-trunk.stage.mozilla.com/en-US/plugincheck/
    #*'''Note: plugin check page does not have information on all plugin versions'''
    #*There are plugin specific testing links available from this page:
    #**http://kb.mozillazine.org/Testing_plugins
    #'''Update the [[Java]] plugin''' to the latest version.
    #*Download site: http://www.oracle.com/technetwork/java/javase/downloads/index.html (Java Platform: Download JRE)
    #**'''''Be sure to <u>un-check the Yahoo Toolbar</u> option during the install if you do not want it installed.
    #*Also see "Manual Update" in this article to update from the Java Control Panel in Windows Control Panel: http://support.mozilla.com/en-US/kb/Using+the+Java+plugin+with+Firefox#Updates
    #* Removing old versions (if needed): http://www.java.com/en/download/faq/remove_olderversions.xml
    #* Remove multiple Java Console extensions (if needed): http://kb.mozillazine.org/Firefox_:_FAQs_:_Install_Java#Multiple_Java_Console_extensions
    #*Java Test: http://www.java.com/en/download/help/testvm.xml

  • Can Firefox associate a specific language to a specific tab?

    I often research or write in multiple languages. I like to open different tabs for my work in each language and select the necessary language for that tab.
    Firefox does not seem to associate a selected language to a specific tab, only maintaining the current language selection for all tabs.
    Am I overlooking how to select a language using Windows on a certain tab and have Firefox remember the selection for that tab as long as the tab remains open?
    This is existing functionality in IE that eliminates having to change language settings when I need to type a different language.
    Thanks.

    The problem I am having is that this website will not load on my MacBook Pro.  I don't know if it has something to do with the fact that the website was created on this computer using iWeb and then I had to change to a different webhost on July 1st (Dreamhost) when Apple discontinued Mobile Me / Webhosting as of July 1st.  That is when I was no longer able to load the site on this one computer.
    I get this message with Safari:
    Safari can’t open the page “http://www.challengefitnesscrossfit.com/” because the server where this page is located isn’t responding.
    and this message from Firefox:
    The connection has timed out
    The server at www.challengefitnesscrossfit.com is taking too long to respond.

Maybe you are looking for

  • G5 and HDTV

    I've been using a Panasonic HDTV as my G5's monitor for a while but the only drawback so far is the screen stretches beyond the visible edge... not by much, but things like the clock in the upper right are cut in half. I'm trying to figure out if it'

  • Help with iTunes and Windows 8

    Hi. I just upgraded to Windows 8. Somehow all my iTunes music transferred to Xbox Music instead of to the the iTunes application. Does anyone know how to transfer the music back to iTunes? I also tried to sync my iPhone to my desktop, since my iPhone

  • Mac pro parking hard disks when not in sleep mode

    I have noticed over the last 3 months or so HD's (2,3, and 4 ) are spinning down when I'm away from machine- even when I'm running logic 9 or other apps then spinning up as soon as I click on icons,apps etc .The computer is not asleep when this happe

  • Please advise on a trade

    Hello all, I need an opinion or even better a suggestion. I have a Macbook core 2 duo 2.0ghz 2gb ram etc.. Someone asked me if I would like to trade it for an Imac g5 20" 2.1ghz top of the line. Now, how is it that machine? Is it still a good one? Co

  • JDev3.1: BC4J: LOV, Find button

    Hi, I took an LOV to populate a text field. This LOV shows when clicked on a button(based on an action). Every thing works fine except find button in LOV. When i typed "w" and clicked on Find button, i received this error: DAC-511: ResultSetInfo: cou