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.

Possible duplicate of [Jquery toggle not working](http://stackoverflow.com/questions/3708086/jquery-toggle-not-working) — Sr Julien, Oct 10 '16 at 18:47

score 2 · Accepted Answer · answered Oct 10 '16 at 19:12

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

score -1 · Answer 2 · answered Oct 10 '16 at 18:54

-1

Try adding div#radioButton1as 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.

answered Oct 10 '16 at 18:54

Brandon

3,074
3
27
44

ID's are unique...putting a tagname in front is less efficient than just using the ID. Changing the selector won;t change behavior OP has either – charlietfl Oct 10 '16 at 19:03
@charlietfl It's not less efficient. If anything, it's more efficient because you are getting more specific with what you're selecting. Have you tried using .slideUp() or .slideDown()? – Brandon Oct 10 '16 at 19:06
you don't understand dom searches then. An ID is absolute and does not require a search of multiple nodes in dom. The dom tracks ID's – charlietfl Oct 10 '16 at 19:07
@charlietfl This could hep out http://stackoverflow.com/questions/497802/how-to-stop-asp-net-from-changing-ids-in-order-to-use-jquery – Brandon Oct 10 '16 at 19:08

jQuery toggle doesn't work in my page

2 Answers2