Close all Accordion Divs

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.
10/21/2019 3:23:50 PM
Gravatar
Total Posts 2

Close all Accordion Divs

When I use accordion, there is always one division open. I would like them to all be closed until the user interacts. Possible? Am I doing something wrong?

4/22/2020 9:49:12 AM
Gravatar
Total Posts 193

Re: Close all Accordion Divs

In my Mojo notes I have this code. I can't confirm that it still works but worth a try.

 

For accordion Change to:
--------------------------------------------
<div class="collapsed-accordion">

Put below accordion code:
--------------------------------------------
<script type="text/javascript">// <![CDATA[
 $('div.collapsed-accordion').accordion({active:false, collapsible:true, autoHeight:false, fx:{opacity:'toggle',duration:'fast'}});
 // ]]></script>

 

For tabs
---------------------------------------------------------------------------
<script type="text/javascript">
// MAKES TABS COLLAPSE ON DEFAULT
// <![CDATA[
    $('.tabs').tabs({collapsible: true, active: false });
// ]]>
</script>


Beginning with mojoPortal 2.3.5.5, if you want to make the same sort of change skin-wide, you can do so by modifying ScriptLoader in the Layout.Master file for your skin, and adding JQueryAccordionConfig=[parameters]. To continue the example of a closed accordion widget, the final ScriptLoader line would look something like this:


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

5/22/2020 2:45:29 PM
Gravatar
Total Posts 2

Re: Close all Accordion Divs

Thanks Eric. Looks very similar to something I did try, maybe identical. It worked, however when the div expanded it was about 5 times the width with an exorbitant amount of white space beneath my content. Couldn't figure out the second layer to that... or even why it happened.