# Modify css with js

**URL:** https://forum.kirupa.com/t/modify-css-with-js/274463
**Category:** Uncategorized
**Created:** [October 30, 2008, 10:59am UTC](https://forum.kirupa.com/t/modify-css-with-js/274463 "2008-10-30T10:59:21Z")
**Posts on this page:** 1
**Page:** 1

<div class="post-metadata">

### Author: ![jakepeg](https://avatars.discourse-cdn.com/v4/letter/j/8dc957/32.png) [@jakepeg](https://forum.kirupa.com/u/jakepeg)
#### Post date: [October 30, 2008, 10:59am UTC](https://forum.kirupa.com/t/modify-css-with-js/274463/1 "2008-10-30T10:59:21Z")

</div>

I have a div that I want to switch from overflow=hidden to overflow=visible on mouse event.

In the \<head\> I have

```auto
<style type="text/css">
        #text_area
        {
            position: absolute;
            height: 213px;
            overflow: hidden;
        }
</style>

<script type="text/javascript">
    function expand_text(){
        e = document.getElementById(text_area);
        if(e.style.overflow=='hidden') {
            e.style.overflow='visible';
        } else {
            e.style.overflow='hidden';
        }
    }
</script>

```

in the I have this…

```auto
<div id="text_area">
        <a href="#" onclick="javascript:expand_text()">Expand text</a><br>
        BLOCK OF TEXT HERE
</div>

```

this code does nothing, not sure why, maybe I’m missing something, or maybe it’s completely wrong!