Jquery Keep State (Retain) Collapsible (Accordion) Panel using Hidden field after Postback

1288Comments

As you know, Jquery ROCKS!

If you are using Collapsible panel, you might have some question about keep the state (retain) of collapsible panel after postback.

You will find several solutions to figure this out. It can be done using cookie (jquery.cookie), ajax collapsible panel and so on...

Here, in this case, I didn't use any fancy approach (method)...

It can be done using hidden field. When you click collapsible panel, it saves your panel id in hidden field. so... after you click button (postback),  it checks the value in hidden field. if it has id then show panel. if not, hide.

Simple concept!!!

Here is code. It works... I also attached project file. you can download and try it~!

 

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="KeepAccordionPanelAfterPostback.aspx.cs"

    Inherits="WebApplication1.KeepAccordionPanelAfterPostback" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>Untitled Page</title>

    <style type="text/css">

        .accordion h3

        {

            font-size: medium;

        }

    </style>

 

    <script src="jquery.js" type="text/javascript"></script>

 

</head>

<body>

 

    <script type="text/javascript">

 

        $(document).ready(function() {

 

            // Check value in hidden field after postback

            // If it has value then show. if not then hide

            var collapseValue = $('#' + '<%=hfCollapse.ClientID%>').val();

            $(".accordion h3").each(function(idx, item) {

                if (collapseValue.toLowerCase().indexOf($(this).parent('[id]').attr('id').toLowerCase()) >= 0) {

                    $(this).next('p').show();

                } else $(this).next('p').hide();

            });

 

            // Click event, Set value in hidden field

            $(".accordion h3").click(function() {

                var collapseValue = $('#' + '<%=hfCollapse.ClientID%>').val();

                var clickedID = $(this).parent('[id]').attr('id');

                if (collapseValue.indexOf(clickedID) >= 0) {

                    collapseValue = collapseValue.replace(clickedID + '|', "");

                }

 

                else collapseValue += clickedID + '|';

                $('#' + '<%=hfCollapse.ClientID%>').val(collapseValue);

 

                $(this).next("p").slideToggle("fast")

            });

        });

 

 

    </script>

 

    <form id="form1" runat="server">

    <table>

        <tbody>

            <tr style="background-color: #DFEFF0">

                <td>

                    <div class="accordion" runat="server" id="div1">

                        <h3>

                            Panel 1. Click ME

                        </h3>

                        <p>

                            This is first row!!!

                        </p>

                    </div>

                    <div class="accordion" runat="server" id="div2">

                        <h3>

                            Panel 2. Click ME

                        </h3>

                        <p>

                            This is second row!!!

                        </p>

                    </div>

                    <div class="accordion" runat="server" id="div3">

                        <h3>

                            Panel 3. Click ME

                        </h3>

                        <p>

                            This is third row!!!

                        </p>

                    </div>

                    <asp:HiddenField ID="hfCollapse" runat="server" />

                    <br />

                    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />

                </td>

            </tr>

        </tbody>

    </table>

    </form>

</body>

</html>

===================================
Attached File:

 

KeepAccordionPanelAfterPostback.zip (43.01 kb)

Enjoy DDIBA~! Cool

SharePoint Pageviewer Webpart Remove side scroll bar (Adjust webpart)

If you are using Page Viewer WebPart with custom aspx page. You might have some problem with sid scroll bar. Your client doens't like duplicate scroll bars...

Here is solution.

It can be done with javascript:

        function resizeMe() {
            window.resizeTo(document.getElementById("yourPageBodyId").scrollWidth, document.getElementById("yourPageBodyId").scrollHeight);
        }
Put this code your custom aspx page, (NOT page viewer webpart).

You might have some question, if you have collapsible panel or or some point your custom page has to be extended. You will have side scroll bar... How to remove it... You can remove it by using javascript.

For the collapsible, if you use collapsible panel with JQuery, you should have click event.

for example: JQuery Code 

    <script type="text/javascript" src="/_LAYOUTS/STYLES/JavaScript/jquery-1.6.1.js"></script>
    <script type="text/javascript" src="/_LAYOUTS/STYLES/JavaScript/jquery.js"></script>

    <script type="text/javascript">

        function resizeMe() {
            window.resizeTo(document.getElementById("yourPageBodyId").scrollWidth, document.getElementById("yourPageBodyId").scrollHeight);
        }

            $("#yourCollabsibleId").click(function() {

                $(this).next("p").slideToggle("fast")
                $(this).toggleClass("active");
                $(this).siblings("h3").removeClass("active");
            });
    </script>

HTML Code:

                            <asp:Panel ID="panel" runat="server">
                                <div>
                                    <h3 id="yourCollabsibleId">
                                        <asp:Label ID="lblCollapsibleTitle" Text="Show" runat="server"></asp:Label>
                                    </h3>
                                    <p id="yourParagraphId">
                                        <table style="width: 100%;">
                                            <tr>
                                                <td>
                                                    blah, blah, blah
                                                </td>
                                            </tr>
                                        </table>
                                    </p>
                                </div>
                            </asp:Panel>

If you click "<h3 id="yourCollabsibleId">" this, it will be expended. and you see side scroll bar...

put same code in clicked event as above:

window.resizeTo(document.getElementById("yourTagId").scrollWidth, document.getElementById("yourTagId").scrollHeight);

You also need to put number like +50 or +100
On clicked event like:

            $("#yourCollabsibleId").click(function() {
window.resizeTo(document.getElementById("yourPageBodyId").scrollWidth, document.getElementById("yourPageBodyId").scrollHeight + 100);

                $(this).next("p").slideToggle("fast")
                $(this).toggleClass("active");
                $(this).siblings("h3").removeClass("active");
            });

or you might need to calculate your paragraph height using JQuery: $("#yourParagraphId").height();

Put this all together:

            $("#yourCollabsibleId").click(function() {
window.resizeTo(document.getElementById("yourPageBodyId").scrollWidth + 30, document.getElementById("yourPageBodyId").scrollHeight + $("#yourParagraphId").height() + 80);

                $(this).next("p").slideToggle("fast")
                $(this).toggleClass("active");
                $(this).siblings("h3").removeClass("active");
            });

put this in your custom page on page viewer webpart, Now you can beat page viewer webpart in SharePoint!


Enjoy DDIBA~! Cool


Donate Me!

Please Help Us to Maintain This Site!

About the Author