y.m y.m - 1 month ago 9
HTML Question

jQuery toggle doesn't work in my page

I want to toggle a div with jQuery toggle function.

Here is my code:



$(document).ready(function () {
$("#removeSongButton").click(function () {
$("#radioButton1").toggle();
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
<asp:Button runat="server" ID="removeSongButton" Text="remove song" />
</div>

<div id="radioButton1">
<asp:RadioButtonList runat="server" ID="radioButton">
<asp:ListItem Text="1" Value="1"></asp:ListItem>
<asp:ListItem Text="2" Value="2"></asp:ListItem>
<asp:ListItem Text="3" Value="3"></asp:ListItem>
</asp:RadioButtonList >
</div>





when i click the "removeSongButton" the div togעle up and immediately toggle down. i think maybe the page reload.

Answer

You are right, its the reload. If the onliest thing you want to do by button-click is to toggle then add an preventDefault like this. Or are there other events you want to trigger by the button-click?

$("#removeSongButton").click(function (e) {
     e.preventDefault();
     $("#radioButton1").toggle();
});