Using Ajax to hide/show certain divs - asp.net

Question

How can I show / hide certain divs according to the selected value in the dropdownlist:
(for example, if Convert from Fahrenheit to Celsius is currently selected in the dropdown, only the conversion div is visible)
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<p>
Please choose required calculation from the following list:
<asp:DropDownList ID="calculation" runat="server">
<asp:ListItem>Addition of three numbers</asp:ListItem>
<asp:ListItem>Convert from Fahrenheit to Celsius</asp:ListItem>
<asp:ListItem>Calculate the side of a right-angled triangle</asp:ListItem>
<asp:ListItem>Find x using the Quadratic Equation</asp:ListItem>
</asp:DropDownList>
<br /><br />
</p>
<div id="addition" runat="server">
<p>
Input variable a : <asp:TextBox runat="server" ID="varA"></asp:TextBox><br /><br />
Input variable c : <asp:TextBox runat="server" ID="varB"></asp:TextBox><br /><br />
Input variable b : <asp:TextBox runat="server" ID="varC"></asp:TextBox><br /><br />
<asp:Button ID="additionSubmit" runat="server" Text="Submit"
onclick="additionSubmit_Click" /><br /><br />
<asp:Label ID="lblAddition" runat="server" Text="" CssClass="label"></asp:Label>
</p>
</div>
<div id="conversion" runat="server">
<p>
Input Fahrenheit Temperature : <asp:TextBox runat="server" ID="temperatureF"></asp:TextBox><br /><br />
<asp:Button ID="converstionSubmit" runat="server" Text="Submit"
onclick="converstionSubmit_Click" /><br /><br />
<asp:Label ID="lblConversion" runat="server" Text="" CssClass="label"></asp:Label>
</p>
</div>
<div id="triangle" runat="server">
<p>
Input side a : <asp:TextBox runat="server" ID="tsideA"></asp:TextBox><br /><br />
Input side b : <asp:TextBox runat="server" ID="tsideB"></asp:TextBox><br /><br />
<asp:Button ID="triangleSubmit" runat="server" Text="Submit"
onclick="triangleSubmit_Click" /><br /><br />
<asp:Label ID="lblTriangle" runat="server" Text="" CssClass="label"></asp:Label>
</p>
</div>
<div id="quadratic" runat="server">
<p>
Input side a : <asp:TextBox runat="server" ID="sideA"></asp:TextBox><br /><br />
Input side c : <asp:TextBox runat="server" ID="sideB"></asp:TextBox><br /><br />
Input side b : <asp:TextBox runat="server" ID="sideC"></asp:TextBox><br /><br />
<asp:Button ID="quadraticSubmit" runat="server" Text="Submit"
onclick="quadraticSubmit_Click" /><br /><br />
<asp:Label ID="lblQuadratic" runat="server" Text="" CssClass="label"></asp:Label>
</p>
</div>

Answer 1

Using Jquery this would work:
(document).ready(function() {
doIt();
$('#yourDropdown').change(doIt); //This is triggered on the change of the dropdown list
function doIt() {
switch ($("#yourDropdown").val()) {
case "addition" :
$("#addition").show();
$('#otherDiv').hide();
break;
case "ConvertFToC":
and so on....
}
});
})
<select id="yourDropdown">
<option value="addition">addition</option>
and so on...
</select>
<div id="addition" >
<p>
Input variable a : <asp:TextBox runat="server" ID="varA"></asp:TextBox><br /><br />
Input variable c : <asp:TextBox runat="server" ID="varB"></asp:TextBox><br /><br />
Input variable b : <asp:TextBox runat="server" ID="varC"></asp:TextBox><br /><br />
<asp:Button ID="additionSubmit" runat="server" Text="Submit"
onclick="additionSubmit_Click" /><br /><br />
<asp:Label ID="lblAddition" runat="server" Text="" CssClass="label"></asp:Label>
</p>
</div>