Показать/скрыть DIV внутри DataList

Question

Я хочу, чтобы переключить Gridview на LinkButton.Both внутри DataList ItemTemplate.Kindly помочь

<asp:DataList ID="dl_newtabs" runat="server" RepeatDirection="Vertical"> 
    <ItemTemplate> 
    <div class="solution_footer"> 
    <asp:LinkButton ID="lnk_tabnew" runat="server" Text='<%# Eval("service_name") %>' 
    CommandArgument='<%# Eval("service_name") %>' OnClick="lnk_tabnewclick" CssClass="toggdiv"></asp:LinkButton> 
    </div> 
    <div id="Div1" style="max-height: 300px; overflow-y: scroll; float: left; width: 100%;" > 
    <asp:Gridview id ="grddesc" runat="server"> 
    </asp:Gridview> 
    </div> 

    </asp:DataList> 

Это то, что я до сих пор сделано, при щелчке LinkButton.

$(document).ready(function() { 
     $(".Div1").hide(); 
     $(".solution_footer").click(function() { 
      $(this).nextAll('div[class="Div1"]').eq(0).slideToggle(100); 
     }); 
    }); 

Answer 1

JS:

function lnk_tabnewclick(){ 
    $('#grddesc').toggleClass('hidden'); 
} 

Я просто использовал на клик событие, которое вы уже обжиг on click здесь ... Изменить при необходимости.

CSS:

.hidden{ display: none } 

HTML:

<asp:Gridview id ="grddesc" runat="server" class="hidden"> 

Или, если вы хотите применить показать/скрыть к охватывающему <div>:

<div id="Div1" class="hidden"></div> 

Если вы хотите, чтобы сетка была скрыта первой, сохраните класс. Если нет, удалите скрытый класс и он будет применен при нажатии.

Answer 2

Вы используете

<div id="Div1" style="max-height: 300px; overflow-y: scroll; float: left; width: 100%;" > 

Div1 не "класс" его "идентификатор"

Попробуйте изменить его

<div class="Div1" style="max-height: 300px; overflow-y: scroll; float: left; width: 100%;" > 

$(document).ready(function() { 
     $(".Div1").hide(); 
     $(".solution_footer").click(function() { 
      $(this).nextAll('div[class="Div1"]').eq(0).slideToggle(100); 
     }); 
    });