SilkUI:Accordion: show first Accordion-item when page loads

SilkUI:Accordion: show first Accordion-item when page loads

  
Hi all,

I want to show the first item of the accordion when the page loads, as opposed to the default behaviour where all elements are hidden on page-load.

Anyone knows how to do this?
Hi Daniel,
Since you want by default on page load the first item to show, you can't use accordion. 
Use Section Expandable instead, and set IsExpanded as True.

In addition, if you want the section exapandable look like the accordion, just override the css.

Hope it helps

Cheers 
Andrew
Hi Andrew,

Thanks for your reply, however i do want to use the accordion since i have 2 large text fields that i need the accordion mechanic for to save space.

I did figure out how to open the first when the page loads:
I added a piece of javascript to the screen containing the accordion:

"<script>
$(function(){
    $(""#"+Accordion.Id+""").find("".AccordionVertical__header:first"").click();  
});
</script>"
And gave the Accordion element the name "Accordion" (this was empty by default)

Hope this helps someone else who also wants the same functionality.

Greets
Daniel,

Thanks for posting this. It's exactly what I needed.

Taking this one step further. Do you know how I could tie this into a boolean, say a variable on the user's profile or on the page? We use the accordion on our dashboard and some users prefer it to be open by default, and others prefer collapsed. In an effort to make everyone happy I've been tasked with finding a way to make this a settable option per person and this would be a huge help.

Thanks again,
Braxton


Edit:
Actually, I'll just throw your script in an IF function! That'll do it pefectly.
Thanks!
Yeah the IF should work.
Glad this could be of help to you!
Daniel de Witte wrote:
Hi Andrew,

Thanks for your reply, however i do want to use the accordion since i have 2 large text fields that i need the accordion mechanic for to save space.

I did figure out how to open the first when the page loads:
I added a piece of javascript to the screen containing the accordion:

"<script>
$(function(){
    $(""#"+Accordion.Id+""").find("".AccordionVertical__header:first"").click();  
});
</script>"
And gave the Accordion element the name "Accordion" (this was empty by default)

Hope this helps someone else who also wants the same functionality.

Greets
 
 How would you change this to do the second or third item vs the first?  Thanks for the help!
Jason Herrington wrote:
Daniel de Witte wrote:
Hi Andrew,

Thanks for your reply, however i do want to use the accordion since i have 2 large text fields that i need the accordion mechanic for to save space.

I did figure out how to open the first when the page loads:
I added a piece of javascript to the screen containing the accordion:

"<script>
$(function(){
    $(""#"+Accordion.Id+""").find("".AccordionVertical__header:first"").click();  
});
</script>"
And gave the Accordion element the name "Accordion" (this was empty by default)

Hope this helps someone else who also wants the same functionality.

Greets
 
 How would you change this to do the second or third item vs the first?  Thanks for the help!
 Did you ever get an answer to the "second or third" accordionItem question?
I have the same scenario - I want to programatically "click" different accordionItems like the second, etc.
 
Jason Herrington wrote:
Daniel de Witte wrote:
Hi Andrew,

Thanks for your reply, however i do want to use the accordion since i have 2 large text fields that i need the accordion mechanic for to save space.

I did figure out how to open the first when the page loads:
I added a piece of javascript to the screen containing the accordion:

"<script>
$(function(){
    $(""#"+Accordion.Id+""").find("".AccordionVertical__header:first"").click();  
});
</script>"
And gave the Accordion element the name "Accordion" (this was empty by default)

Hope this helps someone else who also wants the same functionality.

Greets
 
 How would you change this to do the second or third item vs the first?  Thanks for the help!
Sorry for the late reply, just now saw your question..

Instead of using this:
http://www.w3schools.com/jquery/sel_first.asp

you can use this:
http://www.w3schools.com/jquery/sel_eq.asp

 my example would change to:
$(function(){
    $(""#"+Accordion.Id+""").find("".AccordionVertical__header:eq(1)"").click();  
});
This is the second element because it is zero-based,
just change eq(1) to eq(2) for the second element.
Daniel de Witte wrote:
Jason Herrington wrote:
Daniel de Witte wrote:
Hi Andrew,

Thanks for your reply, however i do want to use the accordion since i have 2 large text fields that i need the accordion mechanic for to save space.

I did figure out how to open the first when the page loads:
I added a piece of javascript to the screen containing the accordion:

"<script>
$(function(){
    $(""#"+Accordion.Id+""").find("".AccordionVertical__header:first"").click();  
});
</script>"
And gave the Accordion element the name "Accordion" (this was empty by default)

Hope this helps someone else who also wants the same functionality.

Greets
 
 How would you change this to do the second or third item vs the first?  Thanks for the help!
Sorry for the late reply, just now saw your question..

Instead of using this:
http://www.w3schools.com/jquery/sel_first.asp

you can use this:
http://www.w3schools.com/jquery/sel_eq.asp

 my example would change to:
$(function(){
    $(""#"+Accordion.Id+""").find("".AccordionVertical__header:eq(1)"").click();  
});
This is the second element because it is zero-based,
just change eq(1) to eq(2) for the second element.
 
 Thanks that worked!
However, after further understanding the user needs I see now that I have to use a Section Expandable (sectionexpandable). You see, there are some cases where more than one accordion item needs to be visible.
So far, the SectionExpandable is working great - BUT - I just need a way to "inspect" the state (open/closed) of the section expandable widget from inside a screen action.

But alas --- that is a question for another thread (if I don't find one already started).

Thanks again folks.
Bruce Buttles wrote:
Daniel de Witte wrote:
Jason Herrington wrote:
Daniel de Witte wrote:
Hi Andrew,

Thanks for your reply, however i do want to use the accordion since i have 2 large text fields that i need the accordion mechanic for to save space.

I did figure out how to open the first when the page loads:
I added a piece of javascript to the screen containing the accordion:

"<script>
$(function(){
    $(""#"+Accordion.Id+""").find("".AccordionVertical__header:first"").click();  
});
</script>"
And gave the Accordion element the name "Accordion" (this was empty by default)

Hope this helps someone else who also wants the same functionality.

Greets
 
 How would you change this to do the second or third item vs the first?  Thanks for the help!
Sorry for the late reply, just now saw your question..

Instead of using this:
http://www.w3schools.com/jquery/sel_first.asp

you can use this:
http://www.w3schools.com/jquery/sel_eq.asp

 my example would change to:
$(function(){
    $(""#"+Accordion.Id+""").find("".AccordionVertical__header:eq(1)"").click();  
});
This is the second element because it is zero-based,
just change eq(1) to eq(2) for the second element.
 
 Thanks that worked!
However, after further understanding the user needs I see now that I have to use a Section Expandable (sectionexpandable). You see, there are some cases where more than one accordion item needs to be visible.
So far, the SectionExpandable is working great - BUT - I just need a way to "inspect" the state (open/closed) of the section expandable widget from inside a screen action.

But alas --- that is a question for another thread (if I don't find one already started).

Thanks again folks.
 
 You can bind the "is expanded" value to a local variable. (if the content is driven by a table/list you can make a calcultaed true/false calue in the aggregate that populates that table/list and manipulate/view it there)
Thx ... will give that a try (binding the IsExpanded) to a local variable.
You see, sometimes the USER will open/close the widget and sometimes I will open/close the widget via code.

I will give that a try ...
Sooooo ... thought I would do the community some "good" and follow up with the final word on this topic.
Thanks Braxton for the idea - binding the IsExpanded to a local variable allowed me to do two critial things:

1) "inspect" the state of the widget regardless if the widget was open/closed by the user or by me programmatically
2) "change state" of the widget by a) setting the local variable associated with each SectionExpandable wiget and then b) refreshing the widget. It works great - although I'd recommend setting the refresh animation to NONE as I saw strange behaviours with animations.

Thanks all!