クリックしてdivをサイズ変更しますか？

Question

私はこのように見えるwebformを持っています。あなたが見ることができるように

は、gridviewsは、スペースの多くを取るので、私はそれらを最小限にしたいと思います：それはいくつかのGridViews含まれるmasterpageでdivです。私はCollapsiblePanelを使用したくないので、すべてを隠すでしょう。 div/gridviewsの半分を隠したいと思います。 基本的に、私がクリックできるコントロールを追加したいと思います：展開すると、gridviewの高さが表示されます。崩壊したとき、私はdivの細分化とgridviewsを見るだけです。

何か助けていただければ幸いです。

ありがとうございました。

Answer 1

div内のすべてのGridViewを、高さを指定してオーバーフローを隠すクラスにラップすることができます。ボタンをクリックすると、クラスのクラスがgridViewContainerに変更され、高さはautoに設定されます。

<div class="small" id="gridViewContainer"> 
    <asp:GridView ID="GridView1" runat="server"></asp:GridView> 
</div> 

<input type="button" onclick="toggleGridContent()" value="toggleGridContent" /> 

<script type="text/javascript"> 
    function toggleGridContent() { 
     var id = "#gridViewContainer"; 
     if ($(id).hasClass("small")) { 
      $(id).attr("class", "large"); 
     } else { 
      $(id).attr("class", "small"); 
     } 
    } 
</script> 

<style> 
    .small { 
     height: 200px; 
     overflow: hidden; 
    } 

    .large { 
     height: auto; 
    } 
</style> 

Answer 2

AjaxコントロールツールキットCollapsiblePanelは、使用している場合、CollapsedSize/ExpandedSizeプロパティを持っていますか？

Javascriptersは、例えば、 jQuery。実際には、あなたがボックスのaspxコントロールを見つけることができない限り、clientsideははるかに簡単ですACTのコントロール。

<!-- give your divs a class and collapsed/expanded sizes --> 
 
<div class="collapsibleDiv" CollapsedSize="10" ExpandedSize="300" 
 
    style="border: 1px red dashed;" 
 
    > 
 
    <p>-</p> 
 
    ... 
 
    <p>-</p> 
 
</div> 
 

 

 
<!-- bottom of page --> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script> 
 
    $(function() { 
 
    $(".collapsibleDiv").click(
 
    function() { 
 
     var me = $(this); 
 
     var expandHeight= Number(me.attr('ExpandedSize')) 
 
     var collapseHeight=Number(me.attr('CollapsedSize')); 
 
     var isExpanded= me.height()===expandHeight; 
 
     var targetHeight= isExpanded ? collapseHeight : expandHeight; 
 
     me.animate({ height: targetHeight}); 
 
     //or without animation : me.height(targetHeight) 
 
    } 
 
); 
 
}); 
 
</script>