javascript - Readmore/readless content toggle function -

javascript - Readmore/readless content toggle function -

this first time asking question on stockoverflow.com bare me here.

what i'm trying accomplish java readmore/readless content toggle function disable other content when 1 content's onclick triggers. i'm using getelementsbyclassname, settimeout, , transition.

the problem i'm having display: none not responding settimeout. suggestion outside of javascript welcome too.

here javascript:

function toggle(cont, tog, id) { (var = 0; < cont.length; i++) { if (tog[id].innerhtml != "click here read less!") { /* toggle on */ tog[id].innerhtml = "click here read less!"; cont[id].style.height = "250px"; /* disable other */ settimeout(function () { cont[i].style.display = "none" }, 500); settimeout(function () { tog[i].style.display = "none" }, 500); (var x = 0; x < cont.length; x++) { cont[x].style.opacity = "0"; tog[x].style.opacity = "0"; settimeout(function () { cont[x].style.display = "none" }, 500); settimeout(function () { tog[x].style.display = "none" }, 500); if (cont[id] == cont[x]) { cont[id].style.opacity = "1"; tog[id].style.opacity = "1"; } } } else { /* toggle off */ tog[id].innerhtml = "click here read more!"; cont[id].style.height = "100px"; /* enable other */ (var x = 0; x < cont.length; x++) { cont[x].style.opacity = "1"; tog[x].style.opacity = "1"; cont[x].style.display = "block"; tog[x].style.display = "block"; } } } }

here html:

<div class="content"> <p> content here! </p> </div> <a href="javascript:toggle(document.getelementsbyclassname('content'), document.getelementsbyclassname('readtoggle'), 0)" class="readtoggle">click here read more!</a> <div class="content"> <p> content here! </p> </div> <a href="javascript:toggle(document.getelementsbyclassname('content'), document.getelementsbyclassname('readtoggle'), 1)" class="readtoggle">click here read more!</a> <div class="content"> <p> content here! </p> </div> <a href="javascript:toggle(document.getelementsbyclassname('content'), document.getelementsbyclassname('readtoggle'), 2)" class="readtoggle">click here read more!</a>

and css formatting sake:

/* centering content */ #wrapper { margin: 0 auto; height: auto; width: 70%; text-align: center; font-family: sans-serif, calibri; } /* styling content */ .content { padding: 25px 50px; margin: 0 auto; height: 100px; width: 500px; display: block; text-align: left; overflow: hidden; -webkit-transition: 0.5s; transition: 0.5s; }

javascript css dom settimeout