CODEWITHSUNDEEP
jqueryasp.nettoggle
sms
sms

Reputation: 426

Jquery Hide And Show not working

this is my jquery 

$(document).ready(function () { 
    $('#lnkButtonSchools').click(function () {
        var dvSchools = $('#divSchools');
        dvSchools.toggle();
    });
});

this is the declaration of div whics i want to toggle

 <div id="divSchools" runat="server" style="display:none">

this is the anchor button

 <a id="lnkButtonSchools" runat="server" class="span8 pad2" style="margin-left:0px;font-size:12px;">Limit by School</a>

The div is not at all coming when clicking anchorbutton. what is the mistake?

Upvotes: 0

Views: 802

Answers (3)

Ishan Jain
Ishan Jain

Reputation: 8171

Try this code:

$(document).ready(function () { 
  $('#<%=lnkButtonSchools.ClientID %>').click(function () {
     $('#<%=divSchools.ClientID %>').toggle();
     return false; 
  });
});

Upvotes: 1

Afzaal Ahmad Zeeshan
Afzaal Ahmad Zeeshan

Reputation: 15860

The issue might be because the anchor tag gets a trigger and loads the page.

Try this code: 

$(document).ready(function () { 
  $('#lnkButtonSchools').click(function () {
     var dvSchools = $('#divSchools');
     dvSchools.toggle();
     return false; // this code
  });
});

This will force the code to return to the current page and stop further execution. So stopping the anchor tag to load a new page. I hope this way the div will get a display: block since your code is perfect; assuming you have connected your web page to the .js file correctly.

Upvotes: 0

palaѕн
palaѕн

Reputation: 73906

Try to prevent default action of the anchor using .preventDefault() like:

$('#<%= lnkButtonSchools.ClientID %>').click(function (e) {
    e.preventDefault();
    var dvSchools = $('#<%= divSchools.ClientID %>');
    dvSchools.toggle();
});

Also, use <%= lnkButtonSchools.ClientID %> for getting the proper ID of the anchor, since your client ID mode is not static,

Upvotes: 2

Related Questions