you can create your own widget and wire up the javascript yourself then you can have full control.

Okay, I figured out how to do this, and in the process uncovered a bug in mojoPortal. The technique is based on this thread from 2010. On ScriptLoader, you can pass custom jQuery Accordion startup parameters. So ultimately the way to do this will be to have a ScriptLoader in your skin's Layout.Master with paramters like this:

<portal:ScriptLoader ID="ScriptLoader1" runat="server" IncludeSizzle="true" JQueryAccordionConfig="{active:'false',collapsible:'true',fx:{opacity:'toggle',duration:'fast'}}" />

This brings me to the bug. Joe, Scriptloader.cs, line 853, looks like this:

initAutoScript.Append(" $('div.mojo-accordion').accordion(" + jQueryTabConfig + ");");

It should look like this:

initAutoScript.Append(" $('div.mojo-accordion').accordion(" + jQueryAccordionConfig + ");");

So to workaround the bug until Joe has a new release of mojoPortal ready, you can set your ScriptLoader line like this. I'm not sure how this will impact jQuery Tabs widgets, if you have any of those, so YMMV.

<portal:ScriptLoader ID="ScriptLoader1" runat="server" IncludeSizzle="true" JQueryTabConfig="{active:'false',collapsible:'true',fx:{opacity:'toggle',duration:'fast'}}" />

Also, note that this solution is "skin wide", so any page using the skin will start with collapsed jQuery Accordions. So if you want it only on one page, you might want to make a duplicate skin and assign it to just that page.

Ultimately the solution might be to have a new built-in Content Template for "jQuery Accordion Collapsed". This would be a feature request to Joe, or if another developer wants to add the Content Template and contribute it to the project, changes would need to be made in SiteUtils.cs and ScriptLoader.cs. Don't forget to submit a signed Contributor Agreement with your changes.

Jamie

Thanks, Joe. You're right that adding the extra accordion initializers contributes to page bloat. I know it's a delicate balancing act between usability and performance. Sometimes I get a little too focused on ease of use.

Since we're in the developer forum, I'll post an alternate method you could use to do this, by entering JavaScript in the HTML mode of a content editor. The bold text is what's changed from the generic jQuery Accordion content template.

<p>Paragraph before the accordion</p>
<div class="collapsed-accordion">
<h3><a href="#">Section 1</a></h3>
<div>
<p>Section 1 content.</p>
</div>
<h3><a href="#">Section 2</a></h3>
<div>
<p>Section 2 content</p>
</div>
<h3><a href="#">Section 3</a></h3>
<div>
<p>Section 3 content</p>
</div>
<h3><a href="#">Section 4</a></h3>
<div>
<p>Section 4 content</p>
</div>
</div>
<p>Paragraph after the accordion</p>
<script type="text/javascript">// <![CDATA[
$('div.collapsed-accordion').accordion({active:'false',collapsible:'true',fx:{opacity:'toggle',duration:'fast'}});
// ]]></script>

I don't agree that it should be closed by default and would not want to change that to the default given all the sites out there already using it with the current behavior it would be bad form for me to make that decision/change and expect everyone to change it back manually after upgrading if they prefer the current behavior as I do. It isn't the default behavior of the widget itself otherwise it would do that by default without any configuration, so the developers of the widget also did not think it should default to closed. 

From my point of view there may be cases where you would want it closed but in most cases you would want it open so the most important content is not hidden by default and the user doesn't have to do anything to see the most important content inside the accordion.

However if you want to make it the default for your site Jamie's instructions should do the trick, with the caveat of the incorrect property name as Jamie mentioned that will be fixed in the coming release.

Best,

Joe