Question: I have a website and am trying to write a piece of JQuery code that makes it so when a particular element (#designbox) is clicked it changes the css from height:80px; to height:100%;

My code looks like this:

```
$(document).ready(function(){
$("#designbox").click(function(){
    $("#designbox").height("100%");
    });
});

```

I also tried the following method:

```
$(document).ready(function(){
$("#designbox").click(function(){
    $("#designbox").css("height","100%");
    });
});

```

With both of these methods there was no change when I clicked on the element. The page I am currently working on is located at <http://sarahduryea.com/?page_id=5> and the '#designbox' elements are the large colored sections on the page. What am I doing wrong?

Also, I checked and the code is linked into the page correctly. It is named SarahScript.js.

Thanks for the help!

Answer: 
It appears that jQuery no-conflict was used. Normally, you can access jQuery with `$`. In my image, you can see that $ is undefined, but the jQuery variable is correct. 

![enter image description here](https://i.stack.imgur.com/ydZi4.png)

Use

```
jQuery(document).ready(function(){
    jQuery("#designbox").click(function(){
        jQuery("#designbox").height("100%");
    });
});

```
Also, I looked at the page source for the link you posted and it appears that you are using the ID "designbox" on more than one element. An ID can only be used once per page (on a single element). 

You currently have something like this:

```
<div class="designbox1" id="designbox">
    <!-- your code here -->
</div>

<div class="designbox2" id="designbox">
    <!-- your code here -->
</div>

<div class="designbox3" id="designbox">
    <!-- your code here -->
</div>

```

To avoid using the same id on more than one element, you could add a unique class ("boxclick" in this example) to each of the three elements and call the click event on that class:

HTML:

```
<div class="boxclick designbox1">
    <!-- your code here -->
</div>

<div class="boxclick designbox2">
     <!-- your code here -->
</div>

<div class="boxclick designbox3">
    <!-- your code here -->
</div>

```

JQuery:

```
jQuery(document).ready(function() {
    jQuery(".boxclick").click(function(){
        jQuery(".boxclick").css("height","100%");
    });
});

```

I also find it useful to change the cursor to a pointer when the desired element to be clicked is hovered over. That way, the user knows that the element can be clicked. You can accomplish this via CSS:

```
.boxclick {
    cursor:pointer;
}

```

Hope this helps!