Javascrip and CSS style not working on my "Google Sites" page?

I have links that once click it will unhide content, and then all content will show after clicked again. I am using on google docs and it will not work. I am also using CSS . The links show but the javascript and CSS won't compile for me or others.

function toggle() {
        var ele = document.getElementById("toggleText");
        var text = document.getElementById("displayText");
        if(ele.style.display == "block") {
                ele.style.display = "none";
                text.innerHTML = "Musis List";
        }
        else {
                ele.style.display = "block";
                text.innerHTML = "Musis List ▼";
        }
} 

#title a:link { color: #38761D; text-decoration: none !important; }
#title a:visited { 
        color: #38761D; text-decoration: none !important; 
}
#title a:hover{ 
        color: #4EA628; 
        background-color:transparent;
        text-decoration: none !important; 
}
#title a:active { 
        color: #4EA628; text-decoration: none !important; 
} 
#title a {
        text-decoration: none !important; 
        display:block;
        border-bottom: 0px solid #38761D;
        font-family: Verdana, sans-serif;
        font-weight: bold;
        font-size: large;       
        line-height: 1.26;
}

<center>
<div id="title" >
<a id="displayText" href="javascript:toggle();">Musis List</a>
</div>
<div id="toggleText" style="display: none">
Here will be a list of music....
</div>

<br />
<br />
<br />

<script language="javascript"> 
function toggle1(id) {
        var ele = document.getElementById("toggleText1");
        var text = document.getElementById("displayText1");
        if(ele.style.display == "block") {
                ele.style.display = "none";
                text.innerHTML = "Video List";
        }
        else {
                ele.style.display = "block";
                text.innerHTML = "Video List &#9660;";
        }
} 
</script>

<div id="title" >
<a id="displayText1" href="javascript:toggle1(1);">Video List</a>
</div>
<div id="toggleText1" style="display: none">Here will be a list of videos....</div>


</center>

Let me know, if anyone can help. I'd appreciated mates.