jquery resizing of a div when clicking a link

Question

Can someone explain how I can resize a div using jquery when someone clicks on a link.

This code isn't working:

$(".a_link").click(function() {
    $("#insur_main").css("width","800px");
 });

Answer 1

You might need to enclose your statement in $(document).ready() to ensure that your event is binded when the element is completely loaded.

 $(document).ready(function() {
   $(".a_link").click(function() {
        $("#insur_main").css("width","800px");
    });
 });

Answer 2

Your code should work

 $(".a_link").click(function() { $("#insur_main").css("width","800px"); }); 

 #insur_main { width:100px; height:100px; background-color:red; } 

 <div id="insur_main"> </div> <a href="#" class="a_link">Resize DIV</a> 

Answer 3

It might be a problem with the order of your script.

See this example on jsFiddle

<script>
    alert( "Doesn't exist yet " + $(".a_link").length );
</script>

<a href="#" class="a_link">Link 01</a>
<script>
    alert( "Now it does exist " + $(".a_link").length );
</script>

<script>
$(function() {
    // ondomready it exists
    alert( "Ready " + $(".a_link").length );
});
</script>

You might be calling the script before the element is rendered. It might not exist on the DOM yet. You have to execute the script after it enters the DOM.