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)
<script type="text/javascript">
$(function() {
$('#accordion').accordion({
header: 'h3',
active: '.selected',
selectedClass: 'active'
</script>Regards,
Dimitri
http://dgielis.blogspot.com/
http://www.apex-evangelists.com/ -
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! -
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ş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 PMHi,
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,
RobV1 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.
AndyMy 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!
-rickthis 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
-
Got a new email address, changed my account on itunes to new email address. which changed my apple id and password. Works fine on computer but My phone is still asking me to sign in with old apple id. I can not figure out how to change apple id on my
-
My Curve 8330 has been getting a little bit funky lately. I get the hourglass for long periods of time, especially when I have more than one application open. Today I got the hourglass for quite a while until I finally got the following error message
-
Installing SUP 2.0 in Windows Server 2008
Hello Experts, I am going to install SUP 2.0 in windows server 2008. so please suggest me how to install it and which components must be install in Server and in Client machine. How to connect client machine with the Server 2008 for Sybase. I foll
-
I need to know how to scan from within Photoshop CC 2014 with an Epson V700 scanner.
In the past there's been a driver to allow me to import directly from Photoshop. I don't see that now. What am I missing? Thanks.
-
Cannot logon with Fingerprint in Win10 TP
I have Lenovo ThinkPad T410 with a fingerprint device that I use all the time I had a user with my fingerprint configured I added my computer to our company's domain and then deleted the other user account as it is not in use anymore now, when I try