Revindex Storefront

How to expand panel by default

Last updated on 2019-02-20 2 mins. to read
This topic only applies to older display templates running WebForms type. Newer templates using Razor type makes this step very easy.

The Storefront uses collapsible panels in many places to improve usability. The panels are typically created using standard DNN or jQuery panels. To expand a panel by default, you can add the following Javascript. 

  1. Create a custom display template for your desired module.
  2. Find the section of code that controls the panels and take note of the ID in the h2 element.

    <asp:Panel ID="EstimateShippingTaxPanel" runat="server" DefaultButton="EstimateShippingTaxLinkButton">
       <h2 id="EstimateShippingTaxFormSectionHead" class="dnnFormSectionHead">
            <a href="#"><asp:Label ID="EstimateShippingTaxSectionLabel" runat="server" resourcekey="EstimateShippingTaxSectionLabel" /></a></h2>

  3. Add the following Javascript to an area in the code that does not conflict or break the tag symmetry. Replace the search key by the ID you copied earlier.

    jQuery(document).ready(function ()
        if (document.cookie.indexOf("EstimateShippingTaxFormSectionHead") < 0)
            $("#EstimateShippingTaxFormSectionHead > a").click();

  4. Save and make sure your module is now using this new custom display template.


Powered by Revindex Wiki