asp.net - ASP.NET CollapsiblePanelExtender: 1 つのターゲットに 2 つの展開/折りたたみボタン

Question

ASP.NETでCollapsiblePanelExtenderの2つのボタンを設定するには?

たとえば、画像とテキストがいくつかのテキストで区切られたパネルがあります。画像とテキストをトリガーにして、パネルを展開/折りたたむ必要があります。

Answer 1

ImageButtion を ExpandControl として追加し、テキスト ボックスのキーアップ イベントを使用して、クライアント側でエクステンダーを展開します。

function expand() {
    var extender = $find("CollapsibleExtender1");
    if (extender.get_Collapsed()) {
        $find("CollapsibleExtender1").expandPanel();
    }
}

<asp:Panel runat="server" ID="CollapsiblePanel">
        Cursus et amet cras egestas, turpis cras tempor diam scelerisque habitasse in, platea
        augue turpis. Odio? Risus, ultricies! Dapibus risus sit. Placerat et in parturient
        tristique, natoque porttitor, platea aenean, a, platea etiam urna, a cum nunc! Parturient
        platea, sit mauris proin, magna lacus, eros, in sed nascetur tempor adipiscing.
    </asp:Panel>
    <asp:ImageButton runat="server" ID="MyImageButton" ImageUrl="~/Images/infoindicator.gif" />&nbsp;
    <asp:Button runat="server" ID="MyButton" Text="Click Me" OnClientClick="expand(); return false;" />
    <ajax:CollapsiblePanelExtender ID="CollapsiblePanelExtender1" runat="server" BehaviorID="CollapsibleExtender1"
        ExpandControlID="MyImageButton" Collapsed="true" TargetControlID="CollapsiblePanel"
        CollapsedText="Collapsed" ExpandedText="Expanded" SuppressPostBack="true" />