dropdownbox - Javascript dropdown button with a scrollover -

i'm new javascript (and coding in general). i've been going through w3schools trying learn bit javascript. i've been attempting build button hover on effect drops down text on click, , pulls when clicked again. i'm attempting place on 1 of pages can have text seo without having bog page. far, have figured out how toggle text, have not had luck actual buttons or drop effect. assistance or advice appreciated.

<script language="javascript">  function toggle() {     var ele = document.getelementbyid("toggletext");     var text = document.getelementbyid("displaytext");     if(ele.style.display == "block") {             ele.style.display = "none";         text.innerhtml = "show text";     }     else {         ele.style.display = "block";         text.innerhtml = "hide text";     } }  </script> 

show text

text goes here

you have 2 main options animation effects - css transition effects or coded in javascript.

css transitions:

you can add transitions css if numerical attributes of element change (e.g. height, opacity), browser animate if, example change height 0px 10px , set transition time 1 second, after 0.1 seconds change 1px, after 0.2 seconds change 2px, etc. can read specifics of implementing css transitions here: http://www.w3schools.com/css3/css3_transitions.asp

javascript

you write own custom function, if you're doing more 1 animation in life it's more time-efficient learn use custom javascript library jquery. entire function you've written above rewritten $('#ele').slidetoggle();

---

unrelated specific question, method have above won't matter seo since google won't see text add javascript - , understand google may not hidden text either.