ASP.NET-javascript點擊顯示收起內容(Show and hide details on click of a divison javascript)

介紹一個方法，可以利用javascript做到內容顯示與隱藏的功能，效果如下圖。

展開後

再點擊又收回

不囉嗦直接看程式碼

<span id="show" class="">

    <a href="#" style="font-size: 30px; text-decoration: none">

        <asp:Label ID="lbl_easy" runat="server" Text=""></asp:Label>

    </a>

</span>

<div id="info" style="display: none; margin-left: 1em">

    <asp:Literal ID="lbr_easy" runat="server" Text=""></asp:Literal>

</div>

紅色的是標題一開始要顯示的字

橘色是內文中的字

要用啥元件可以看應用，這邊label與literal的值會去跟後端串接。

<script type="text/javascript">

        $('#show').click(function () {

            $('#info').toggle();

            var visible = $('#info').is(":visible");

            var value = document.getElementById("<%=lbl_easy.ClientID%>").value;

            if (visible)

                $('a', this).html(value);

            else

                $('a', this).html(value);

        });

 </script>

javascript的部分，先去找div=show當它做點擊時觸發function就是去抓div=info的那個區塊對它做顯示或收合的動作。

另外我還有去抓某個label的值來控制它顯示或收合時title要顯示什麼字(紅色部分的程式碼)。