Hi, When I click on a button it should hide all my 'select' input and when I click on another button, it should make them visible again. Here's how I do it :
<div> <asp:DropDownList ID="ddSearchCriteria" runat="server" /> <input type="button" id="btnSearch" value="Go" /> <input id="btnNewCutting" type="button" value="New" /> <input id="btnEmail" type="button" value="Email" /> <asp:DropDownList ID="ddSortBy" runat="server" AutoPostBack="true"></asp:DropDownList> </div> <script type="text/javascript"> $(document).ready(function() { $("#btnEmail").bind("click", function(e) { $("select").css("display", "none"); }); $("#btnSearch").bind("click", function(e) { $("select").css("display", "block"); }); }); </script> This works, except that when I make them visible again, the layout changes ! The elements in the div are no longer next to each other. Now there is the first select, then the 3 buttons underneath, then the second select underneath the 3 buttons. Why .css("display", "none") changes the layout ?