Click here to Skip to main content
15,789,776 members
Please Sign up or sign in to vote.
2.00/5 (1 vote)
See more:
Please, I just really did get the code as supposed to be. I still have a problem. I am not very good with js and jquery because I am still learning. I just needed this one for now. I have the js code already:

Java Script 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" } }
// -->


Locate the section of the <body> where your collapsible text needs to go. Paste the following code there, substituting the text to suit your needs.
<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 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 onClick="openClose('a3')" style="cursor:hand; cursor:pointer"><b>3] Item 3:</b></div>
<div id="a3" class="texter">
Item 3 text.<br /><br />

Secondly the CSS
.contentBox {
    border: 1px solid black;

.readLess {
    height: 200px;

.readMore {
    height: 400px;

Thirdly the Html

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

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

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

But now my problem is how do I combine this code to get a single thing? Where am I supposed to put any of this text to call them to one thing as a whole.
Updated 27-Feb-13 8:48am
Richard C Bishop 27-Feb-13 13:49pm    
You have not asked a question or even mention what you are trying to do. How are we supposed to help you?
Sergey Alexandrovich Kryukov 27-Feb-13 14:09pm    
It makes some sense, so I answered. I wish OP reads documentation and find such simple information independently.
Richard C Bishop 27-Feb-13 14:11pm    
I am impressed by your abilities again. I got nothing from reading it.
Sergey Alexandrovich Kryukov 27-Feb-13 14:25pm    
Do you think, is it good or bad?
I don't know what abilities do you mean. I'm not really a good reader, I'm a writer. :-) There was a number of cases when I could not get what the question was about until some other expert explained it in more accurate term; and I also tend to stop reading after a first sloppy point. At the same time, I can understand the confusion of OP who is probably just starting...
Interestingly, when you use HTML for a long time, you might consider it fine, but from a fresh glance, it shows a lot of ugly stuff and inconsistencies...
Richard C Bishop 27-Feb-13 14:29pm    
I was refering to your programming abilities. You were able to come up with a solution to something I had no idea what was going on. Just paying respect.

JavaScript can be placed in <header> or <body>, with different effect, and can be embedded in HTML or external. This is explained here:[^].

CSS is simpler, because it's not executed, but the style can be inlined in the element or be in a style sheet. A style sheet can also be embedded (normally, in <header>) or be external. Please see:[^].

Share this answer
Share this answer

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900