Click here to Skip to main content
11,932,048 members (55,875 online)
Rate this:
Please Sign up or sign in to vote.
See more: CSS
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.
Posted 27-Feb-13 8:27am
Edited 27-Feb-13 8:48am
richcb 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.
richcb 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...
richcb 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.
Sergey Alexandrovich Kryukov 27-Feb-13 14:52pm
Oh, I'm flattered.. :-) Thank you for your nice words...
RdNard 27-Feb-13 14:27pm
sorry guys, this is not what i interned to ask ok. so its ok. chess!!
RdNard 27-Feb-13 14:30pm
oh sorry guys, i never interned asking on this code really, so its ok i need no more answers. chessss!
Sergey Alexandrovich Kryukov 27-Feb-13 14:54pm
What then? Your question looks perfectly clear to me, as well as my answer. And now you are telling me I wasted time and call it "ok".
RdNard 28-Feb-13 10:07am
dont worry guys, that was a mistake totally of no use. i solved the problem my self. i wasen't really sure of what i was doing ahaha chesss
Rate this: bad
Please Sign up or sign in to vote.

Solution 2

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:[^].

Rate this: bad
Please Sign up or sign in to vote.

Solution 1


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

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web02 | 2.8.151126.1 | Last Updated 27 Feb 2013
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100