Combinding the Js code, Jquery Code Css and html Code

if (document.getElementById) {
document.writeln('<style type="text/css"><!--')
document.writeln('.texter {display:none} @media print {.texter {display:block;}}')
document.writeln('//--></style>') }

function openClose(theID) {
if (document.getElementById(theID).style.display == "block") { document.getElementById(theID).style.display = "none" }
else { document.getElementById(theID).style.display = "block" } }
// -->
</script>

<div onClick="openClose('a1')" style="cursor:hand; cursor:pointer"><b>1] Item 1:</b></div>
<div id="a1" class="texter">
Item 1 text.<br /><br />
</div>

<div onClick="openClose('a2')" style="cursor:hand; cursor:pointer"><b>2] Item 2:</b></div>
<div id="a2" class="texter">
Item 2 text.<br /><br />
</div>

<div onClick="openClose('a3')" style="cursor:hand; cursor:pointer"><b>3] Item 3:</b></div>
<div id="a3" class="texter">
Item 3 text.<br /><br />
</div>

.contentBox {
    border: 1px solid black;
}

.readLess {
    height: 200px;
}

.readMore {
    height: 400px;
}

<div class="contentBox">
    <p>Initial Text goes here</p>

    <a class="addlTextTrigger" href="#">Read More</a>

    <div class="addlTextBox">
        <p>Additional Text here.</p>
    </div>
</div>