0

I created an asp.net file with a working collapsible panel. I assumed that if I take the client side's source and copy it into an HTM file it would still work - but it doesn't.

What I did was "view source" and copied all of it to a blank HTM file. All is working besides for the collapsible panel.

Why? Can I fix it?

Thanks

user1436942
  • 75
  • 1
  • 11

2 Answers2

0

Here is Why

I will try and explain in short but have to use assumptions. ASP.NET is a web application framework that is compiled at runtime meaning your page is converted from objects and controls to html, css and javascript; the Javascript (ScriptResource.axd) is encrypted and you do not have access to the scripts in your htm page. Good Link about ScriptResource.axd

How to fix it?

The Great news is yes! Assuming you are using AJAXToolKit (and yes that is a big assumption), you can instead use jQuery UI Accordion with only one section. I tested both and they work the same. I hope this helps! jQuery Accordion reference

ASPX Example using AJAX (Collapsible Panel):

<form id="form1" runat="server">
  <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <ajaxToolkit:CollapsiblePanelExtender runat="server" 
        TargetControlID="Panel1" 
        Collapsed="true"
        ExpandControlID="LinkButton1" 
        CollapseControlID="LinkButton1" />

    <asp:LinkButton ID="LinkButton1" runat="server">Panel</asp:LinkButton>
    <asp:Panel ID="Panel1" runat="server">
        This is a Test
    </asp:Panel>
  </div>
</form>

HTM Example using jQuery (Accordion):

<head>
<title></title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/jquery-ui.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        $('#Panel1').hide();

        $('#pnlLink').click(function () {
            $(this).next().toggle();
            return false;
        }).next().hide();
    });

</script>
</head>
<body>
   <a id="pnlLink" href="#">Panel</a>
   <div id="Panel1">
    <div>
        This is a test</div>
    </div>
</body>
YoungManB
  • 33
  • 7
0

You can use jQueryUI accordion functionality http://jqueryui.com/accordion/

or jQuery slideToggle() function Regards Nate

Daniel
  • 605
  • 1
  • 8
  • 19