Показать/скрыть тег div javascript

Question

У меня есть столбец gridview, который получает большое количество текста с сервера. Поэтому вместо того, чтобы показывать весь текст после загрузки сетки, я хочу показать его только в том случае, если пользователь нажимает ссылку «Развернуть», а затем закрывает ее с помощью ссылки «свернуть». Вот что у меня есть. Обратите внимание, что я уже знаю, что могу использовать обе функции javascript в одном; Сейчас я тестирую две отдельные функции.

<script type="text/javascript" language="javascript" > 
function hidelink() { 
    var col = $get('col'); 
    var exp = $get('exp'); 
    col.style.display = 'none'; 
    exp.style.display = ''; 

} 
function showlink(){ 
    var col = $get('col'); 
    var exp = $get('exp'); 
    col.style.display = ''; 
    exp.style.display = 'none'; 
} 

<asp:GridView ID="GridView2" Width="400px" runat="server" AutoGenerateColumns="False" 
AllowPaging ="True" 
BackColor="White" BorderColor="#999999" 
BorderStyle="None" BorderWidth="1px" 
CellPadding="3" DataKeyNames="APPID" 
DataSourceID="SqlDataSource3" 
PagerSettings-Mode="NextPreviousFirstLast"    EnableSortingAndPagingCallbacks="True"> 

<PagerSettings Mode="NextPreviousFirstLast" /> 

<RowStyle BackColor="#EEEEEE" ForeColor="Black" /> 
<Columns> 
<asp:BoundField DataField="stuff" HeaderText="Name" ReadOnly="True" 
SortExpression="app" /> 
<asp:BoundField DataField="Description" HeaderText="Short Descr" 
ReadOnly="True" SortExpression="des" /> 
<asp:TemplateField HeaderText="Long Descr" SortExpression="data"> 
<EditItemTemplate> 
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("data") %>'></asp:TextBox> 
</EditItemTemplate> 
<ItemTemplate> 
<div id="col"> 
<asp:LinkButton ID="expand" runat="server" OnClientClick ="hidelink();return false;">Expand</asp:LinkButton> 
    </div> 
    <div id="exp" style="display:none"> 
    <asp:LinkButton ID="collapse" runat="server" OnClientClick ="showlink();return false;">Collapse</asp:LinkButton> 
    </div> 
    <asp:Panel ID="Panel1" runat="server" > 
    <table> 
    <tr> 
     <td>                  <%#Eval("LongDescription")%> 
     </td> 
    </tr> 
    </table> 

Моя проблема заключается в том, что только первая запись делает все, что надо. (expand/collapse), но другие строки расширяются и не скрывают ссылку расширения в теге div. Он находит только идентификатор первой строки, потому что, когда кнопка расширения попадает в любую другую строку, она меняет первую строку, чтобы показать ссылку на сведение. Как я могу это исправить?

Answer 1

Для каждой строки необходимо использовать уникальные идентификаторы. Идентификаторы могут применяться только к одному элементу страницы, а ваш код применяет один идентификатор ко всем экземплярам этого большого столбца в таблице.

В качестве альтернативы вы можете просто использовать методы DOM для поиска нужного элемента для отображения/скрытия. Например:

<div> 
    <a href="#" onclick="showHideDesc(this); return false;">Expand</a> 
    <table style="display: none;"> 
    <tr> 
     <td><%#Eval("LongDescription")%></td> 
    </tr> 
    </table> 
</div> 

Тогда для вашего сценария:

function showHideDesc(link) { 
    var table = link.parentNode.getElementsByTagName("TABLE")[0]; 
    if (table.style.display == "none") { 
     table.style.display = ""; 
     link.innerHTML = "Collapse"; 
    } 
    else { 
     table.style.display = "none"; 
     link.innerHTML = "Expand"; 
    } 
} 

Answer 2

Проблема заключается в том, что, поскольку у вас есть повторяющиеся элементы, идентификаторы DIVs повторно используемый. Это незаконно в HTML. Свойство id каждого элемента должно быть уникальным. Лучший способ справиться с этим - передать ссылку на текущий элемент обработчику и получить из него элемент, с которым он должен работать, путем перемещения DOM.

<div> 
    <asp:LinkButton ID="expand" runat="server" OnClientClick ="hidelink(this);return false;">Expand</asp:LinkButton> 
</div> 
<div style="display:none"> 
    <asp:LinkButton ID="collapse" runat="server" OnClientClick ="showlink(this);return false;">Collapse</asp:LinkButton> 
</div> 

Примечание: Я использую jQuery в этих функциях, так как это облегчает перемещение DOM. Вы можете сделать то же самое со своими функциями обхода DOM и, если хотите, установить свойства стиля.

function hidelink(ctl) { 
    var myDiv = $(ctl).closest('div'); 
    myDiv.hide(); 
    myDiv.next('div').show(); 
} 

function showlink(ctl){ 
    var myDiv = $(ctl).closest('div'); 
    myDiv.hide(); 
    myDiv.prev('div').show(); 
}