How to Close all Headings in jQuery Accordion when Page Loads

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

Please do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.

This forum is for discussing mojoPortal development

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

You can monitor commits to the repository from this page. We also recommend developers to subscribe to email notifications in the developer forum as occasionally important things are announced.

Before posting questions here you might want to review the developer documentation.

Do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.
This thread is closed to new posts. You must sign in to post in the forums.
8/15/2011 3:32:00 PM
Gravatar
Total Posts 19

How to Close all Headings in jQuery Accordion when Page Loads

By default the first heading in a jQuery accordion is expanded/opened when the page that contains the jQuery loads. Is there a way to prevent this (i.e., leave all headings closed when page loads)?

If not, is there a way to specify which heading expands on page load?

8/16/2011 7:13:01 AM
Gravatar
Total Posts 18439

Re: How to Close all Headings in jQuery Accordion when Page Loads

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

7/10/2012 12:08:51 PM
Gravatar
Total Posts 41

Re: How to Close all Headings in jQuery Accordion when Page Loads

Hi,

I'm just trying to do the exact same thing myself (close all accordion panes on page load).  I appreciate that the documentation is all there on the jQuery site, but this is just one more thing for me to have to learn from scratch and probably never use again!

I'd appreciate any clues as to where to start with this.  For example, where is the java script that controls the accordion located within a mojo site?  I've found /clientscript/jqmojo but nothing in there that looks like it's to do with the accordion widget.

 

Thanks.

7/10/2012 1:04:43 PM
Gravatar
Total Posts 1203
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: How to Close all Headings in jQuery Accordion when Page Loads

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

7/10/2012 1:24:10 PM
Gravatar
Total Posts 18439

Re: How to Close all Headings in jQuery Accordion when Page Loads

Hi Jamie,

Thanks! I will fix that bug.

I'm not sure I want to keep adding more and more of these different built in jquery widget configurations because there is some performance  overhead when using class selectors, its fine with a few of them but it can get to be too much if we add more and more of them. They are basically for convenience because then you just add the markup anywhere you want it, but anyone can wire up their own widgets inside a content instance using id selectors and whatever configuration they want. 

I added the ones we have because we use them in lots of built in features anyway but I think an accordion that is completely closed at first is less commonly used and anyone can make that happen without using our convenience mechanisms and I would not want to add more built in init script stuff for class selectors that are not widely used.

Best,

Joe

7/10/2012 1:37:08 PM
Gravatar
Total Posts 1203
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: How to Close all Headings in jQuery Accordion when Page Loads

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

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>

7/10/2012 3:36:03 PM
Gravatar
Total Posts 41

Re: How to Close all Headings in jQuery Accordion when Page Loads

Hi both,

Just a quick 'thank you very much' for the speedy and very informative replies - I came to the right place once again!  Will check your suggestions out in the morning.

Thanks again.

7/11/2012 11:40:55 AM
Gravatar
Total Posts 41

Re: How to Close all Headings in jQuery Accordion when Page Loads

Thanks again Jamie and Joe.  This works fine - I used the second method as this is a one-off, though in actual fact I think this is the way the accordion should work by default, otherwise the initial open leaf gets preference over the others.  So I may well add this behaviour to the skin.

Thanks again.

7/11/2012 12:16:49 PM
Gravatar
Total Posts 19

Close All Query Accordion Headings when Page Loads

I would recommend that all Accordion headings be closed when the page loads.

7/11/2012 12:35:20 PM
Gravatar
Total Posts 18439

Re: How to Close all Headings in jQuery Accordion when Page Loads

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

7/11/2012 12:41:35 PM
Gravatar
Total Posts 19

Re: How to Close all Headings in jQuery Accordion when Page Loads

I was just agreeing with the previous guy.

7/11/2012 12:47:04 PM
Gravatar
Total Posts 18439

Re: How to Close all Headings in jQuery Accordion when Page Loads

No worries, I'm not saying its wrong for anyone to think that should be the default, just saying I don't agree and don't intend to change the default behavior. For all I know your opinion may be the majority opinion on this but I think it would be bad for me to change the behavior of existing sites when people upgrade. Fortunately its a configurable thing so it can be set according to personal preferences.

Best,

Joe

7/11/2012 1:01:58 PM
Gravatar
Total Posts 1203
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: How to Close all Headings in jQuery Accordion when Page Loads

The nice thing about the Layout.Master modification that I posted is that you are free to set up whatever skin-wide parameters you want to apply to jQuery Tabs and Accordion. I will update the Styling jQuery Widgets document with this information as well, so we have it in the document library and easy to find.

Jamie

You must sign in to post in the forums. This thread is closed to new posts.