jQuery toggle doesn't work in my page

Question

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 1

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();
});

Answer 2

Try adding div#radioButton1 as your selector. I've created a super simple jsbin http://jsbin.com/rudocofowu/edit?html,output

---

If that doesn't help, then I would start with removing toggle() and try to use just slideUp() or slideDown() from jQuery just to isolate which one is messing up.