Jquery accordion how to collapse panel by default

Hi I am using the latest Dreamweaver how do I collapse the panel so that none are open when the page first opens?

mayramoca33 wrote:
collapsibleType: Boolean
Default: false
Whether all the sections can be closed at once. Allows collapsing the active section.
Code examples:
Initialize the accordion with the collapsible option specified:
1
$( ".selector" ).accordion({ collapsible: true });
Get or set the collapsible option, after initialization:
1
2
3
4
5
// getter
var collapsible = $( ".selector" ).accordion( "option", "collapsible" );
// setter
$( ".selector" ).accordion( "option", "collapsible", true );
HI Nancy I see this
and I click on collapsible in property panel and it give me this:
<script type="text/javascript">
$(function() {
  $( "#Accordion1" ).accordion({
  heightStyle:"content",
  animate:{easing: "swing"},
  collapsible:true
        </script>
But I can't figure out how to collapse the first panel
http://restoring-health.net/resources.html
Try the following:
<script>
$(function() {
$( "#Accordion1" ).accordion({
active: false,
collapsible: true,
heightStyle:"content",
animate:{easing: "swing"},
</script>

Similar Messages

  • JQuery Accordion Help: Closing Active Panel

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

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

  • Jquery Accordion as menu problem

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

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

  • DW CS6 - Spry collapsible panels - How to have panel close when you click away from it?

    I know typically onmouseout is used to close other items, but I could not figure it out with the spry collapsible panel. I have the panel opening onclick and closing onclick, but I would really like for it to close when you click anything else on the page outside of the panel.
    Thank you!

    Sorry, I did not mean other collapsing panels close when you click away from it. I simply meant in general for the closing after clicking away function, you can use onmouseout. I was working on something with collapsing panels and I wanted it to show the information when you clicked on it, but when you click on another panel, they both remain open. I really want both to close. I believe accordion does this, but not quite what I am looking for either.
    Here is a better example of what I would prefer: Houston Public Library
    If you visit their page and click "Find it" a box pops down with information and then when you click anywhere else on the screen, it closes that box. When you click "Research," it closes the "Find It" box and opens the "Research" box. There is likely a much better way to do this, but I am pretty new to this.
    Any assistance is very much appreciated.
    Thank you!

  • When I opt to "download this as a file" from my email account, Firefox defaults to notepad to open the file. How can I change the default to MS Word?

    Question
    When I opt to "download this as a file" from my email account, Firefox defaults to notepad to open the file. How can I change the default to MS Word?

    Is FF downloading the file as a .txt file? If so, go to "Folder Options" in the windows control panel. Click on the "File Types" tab. Scroll down until you reach the TXT file extension. Look to see what that extension opens with (lower part of panel). It probably shows notepad. Click on the <Change> button. Scroll down until you find "Microsoft Word." Select it and click the <OK> button. That should show the TXT extension is now associated with Microsoft Word. Click the <Close> button at the bottom of the panel.
    If FF is downloading the file as any other type, use the same process as above except look for the corresponding extension instead. If the extension is not listed click on the <New> button and create an association using the extension in the file name and then associate it with MS Word.
    davewdan

  • How can I set a default file for JFileChooser

    Hi. I am developing a p2p chat application and I have to unrelated questions.
    1. How can I set a default file name for JFileChooser, to save a completly new file?
    2. I have a JTextArea that I append recieved messages. But when a message is appended, the whole desktop screen refreshes. How can I prevent that?
    Hope I was clear. Thanks in advance.

    Thank you for the first answer, it solved my problem. Here is the code for 2nd question, I've trimmed it a lot, hope I didn't cut off any critical code
    public class ConversationWindow extends JFrame implements KeyListener,MessageArrivedListener,ActionListener,IOnlineUsrComp{
         private TextArea incomingArea;
         private Conversation conversation;
         private JTextField outgoingField;
         private JScrollPane incomingTextScroller;
         private String userName;
         private JButton inviteButton;
         private JButton sendFileButton;
         private JFileChooser fileChooser;
         private FontMetrics fontMetrics;
         private HashMap<String, String> onlineUserMap;
         public void MessageArrived(MessageArrivedEvent e) {
              showMessage(e.getArrivedMessage());
         public ConversationWindow(Conversation conversation)
              this.conversation=conversation;
              userName=User.getInstance().getUserName();
              sendFileButton=new JButton("Dosya G�nder");
              sendFileButton.addActionListener(this);
              inviteButton=new JButton("Davet et");
              inviteButton.addActionListener(this);
              incomingArea=new TextArea();
              incomingArea.setEditable(false);
              incomingArea.setFont(new Font("Verdana",Font.PLAIN,12));
              fontMetrics =incomingArea.getFontMetrics(incomingArea.getFont());
              incomingArea.setPreferredSize(new Dimension(300,300));
              outgoingField=new JTextField();
              outgoingField.addKeyListener(this);
              incomingTextScroller=new JScrollPane(incomingArea);          
              JPanel panel=new JPanel();
              panel.setLayout(new BoxLayout(panel,BoxLayout.PAGE_AXIS));
              panel.add(inviteButton);
              panel.add(sendFileButton);
              panel.add(incomingTextScroller);
              panel.add(outgoingField);
              add(panel);
              pack();
              setTitle("Ki&#351;iler:");
              setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
              setLocationRelativeTo(null);
              addWindowListener(new CloseAdapter());
         //Sends the message to other end
         public void keyPressed(KeyEvent e) {
              if(e.getKeyCode()==KeyEvent.VK_ENTER && e.getSource()==outgoingField)
                   String message=outgoingField.getText();
                   if(message.equals("")) return;
                   showMessage(userName+": "+message);
                   conversation.sendMessages(userName+": "+message);
                   outgoingField.setText("");     
         //Displays the recieved message
         public void showMessage(String message)
              if(fontMetrics.stringWidth(message)>incomingArea.getWidth())
                   int mid=message.length()/2;
                   StringBuilder sbld=new StringBuilder(message);
                   for(;mid<message.length();mid++)
                        if(message.charAt(mid)==' ')
                             sbld.setCharAt(mid, '\n');
                             message=sbld.toString();
                             break;
              incomingArea.append("\n"+message);
    }

  • Tree view in collapsed mode by default

    Hello Experts,
    Could you please explain how to get a tree view collapsed by default?
    My scenario:
    When looking for a Marketing Segment, the system displays the result with a tree view in expanded mode, containing all the Profile Sets with their profiles and Target Groups.
    I would like to have the tree view in collapsed mode by default with only the Profile Sets displayed. Then, if need I would expand a given Profile Set to display its Profiles and Target Groups.
    Component: SEGAS_SEG
    View: RTSEG
    Thank you very much for your answer.
    Best Regards.
    Edited by: KenshiroHokuto on Apr 26, 2010 5:15 PM
    Edited by: KenshiroHokuto on Apr 26, 2010 5:16 PM

    Hi,
         Have a look at the context node SEG in the view RTSEG. You will see a method REFRESH. The following lines are responsible for the automatic expansion.
            IF search_roundtrip = abap_true AND lv_index < 20.
              lr_root->expand_node( ).
            ENDIF.
      Going by what you say, you will want to comment out these lines. If your component/view is not enhanced, enhance it and redefine this method. Copy the standard code and alter it. You need to alter this code to suit your requirement. For enhancing the component/view, you can find wikis in the CRM WebClient UI section.
    Regards,
    Arun Prakash

  • 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

  • Spry Tabs + Collapsable Panels

    Hello,
    I have tabs within collapsable panels and in firefox and IE you can see the tabs even if that panel is not open. Any ideas on how to fix this situation?
    Thanks, here's my example:
    http://www.robvanwyen.com/cv/rfblair/
    Best,
    Rob

    V1 Fusion I was going through Spry forums and saw a problem
    that another user had similiar to mine and was wondering if you
    could offer some support. I am using the Tabbed panel from Spry and
    can only get 5 tabs across before it starts a new tab below the
    others. I was looking thru CSS file but not sure what can be
    changed so I can allow 6 tabs accross. I'd send you link but it's
    behind a firewall. I can send you a screen shot with email address.
    Any help greatly appreciate it!!!!!!

  • CS4: Collapsed panels won't stay open

    I messed up my regular workspace view and reverted to a preset and noticed the collapsed panels won't stay open when expanded. I'm not sure if this is how it used to work, but it just feels wrong.
    Let's say I want to move an object to another layer. I click on the collapsed Layer-panel icon to open it, then select (click) the object on artboard and Layer panel collapses back to icon. Then I need to click the panel icon again to open it and now I can move the object to another layer, but layer panel collapses again when I select another objet.
    I remember having this same UI problem with Flash CS4. Have I messed up some setting, or is this really how UI works in Illustrator? I would like to save screenspace by having panels collapsed and only keeping open the one I need. InDesign works like this, keeping expanded panels open until they are collapsed again.

    Thank you! It must've have switched on when I reverted to another screenset, because I can't remember ever seeing this setting (or even reading about it).

  • Collapsable Panel Group: close previous panel on next panel focus

    Hello All,
    I am playing around with Spry and started off with the Accordian.  But I wanted to be able to 'expand all' so moved on to the collapsable panel.
    However, I also want the accordian effect, whereby when one panel is clicked and opened, the previous panel will close.  Is there a variable to include in the collapsablepanelgroup to acheive this?
    Looking at it another way, I want to 'close open panel(s), open new panel', when the mouse clicks on the new panel.
    I'm using Spry Pre-Release 1.6.1
    You can see my efforts so far at http://yabbox.com/spry.php
    Many thanks for your help and direction.
    Andy

    My first answer would be.. Use the accordion ;D
    However, I also want the accordian effect, whereby when one panel is clicked and opened, the previous panel will close.  Is there a variable to include in the collapsablepanelgroup to acheive this?
    Not with out modifications to the collapsible panel code.
    But you could just create a custom for you that remembers the previouse panel that was clicked...
    and add onclick="" to each panel tab to activate the function

  • How to change Bridge CC default's to open images in PS CC?

    Bridge CC default to open images is PS CS6, how do I change the default to PS CC?

    Update on this issue:
    Concerning Ps CS6 seizing Dominance:
    I did try UNinstalling and then re-installing Ps CC 14.00 but Ps CS6 still retained "Dominance" (meaning that it was impossible to change System Permissions to recognise that all PSDs should always be opened from the Finder in Ps CC).
    Finally I uninstalled Ps CS6 from this HD and now CC has established "Dominance".
    Bridge CS6 was NOT removed from my HD when I uninstalled Ps CS6. (You need to keep Bridge CS6 until Adobe replaces the the AOM Panel in Bridge CC.)
    Also, choosing the Default File Associations in Bridge CC, now correctly sets all Photoshop-related Associations to Ps CC instead of Ps CS6.
    Duplicated from another thread beause there are multiple threads all discussing the same issue!

  • How do I change the default paragraph style from Body Text?

    The default paragraph style in my email setup is Body Text. This does not wrap properly for some recipients, but Paragraph does. How do I change the default so that Paragraph is automatically used when I start a new email?

    There are two types of defaults: defaults for all new documents and defaults for the current document. To change the default for any open document make sure no text frame is active and change the formatting as desired in either the Control panel or the Character and Paragraph panels. To change default formatting for new document (those not yet created) do this while no file is open. You can’t change the defaults for several documents at once without a script.

  • Issues with spry collapsable panel

    hey guys, i am very new, thank you in advance for your patience. i posted this in the spry forum as well.
    i created a spry collapsable panel with 3 drop down options. when i preview the object in a browser, there is a blue box around the object, i presume to tab around the page. how do i get rid of this? i have done all i know in CSS, is this a JS issue? how can i get rid of it?
    thank you for dealing with my ignorance!
    -rick

    this was answered in the spry forums.
    http://forums.adobe.com/thread/506212?tstart=0

  • 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.

Maybe you are looking for