Click here to Skip to main content
Rate this: bad
good
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" } }
// -->
</script>
2
 
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>
 
<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>
 
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>
    </div>
</div>
 

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
RdNard319
Edited 27-Feb-13 8:48am
v4
Comments
richcb at 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 at 27-Feb-13 14:09pm
   
It makes some sense, so I answered. I wish OP reads documentation and find such simple information independently.
—SA
richcb at 27-Feb-13 14:11pm
   
I am impressed by your abilities again. I got nothing from reading it.
Sergey Alexandrovich Kryukov at 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...
—SA
richcb at 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 at 27-Feb-13 14:52pm
   
Oh, I'm flattered.. :-) Thank you for your nice words...
—SA
RdNard at 27-Feb-13 14:27pm
   
sorry guys, this is not what i interned to ask ok. so its ok. chess!!
RdNard at 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 at 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".
—SA
RdNard at 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
good
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:
http://www.w3schools.com/js/js_howto.asp[^].
 
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:
http://www.htmlhelp.com/reference/css/style-html.html[^].
 
—SA
  Permalink  
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

  Permalink  

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

  Print Answers RSS
0 OriginalGriff 195
1 ProgramFOX 130
2 Maciej Los 105
3 Afzaal Ahmad Zeeshan 82
4 Sergey Alexandrovich Kryukov 75
0 OriginalGriff 6,564
1 Sergey Alexandrovich Kryukov 6,048
2 DamithSL 5,228
3 Manas Bhardwaj 4,717
4 Maciej Los 4,150


Advertise | Privacy | Mobile
Web04 | 2.8.1411022.1 | Last Updated 27 Feb 2013
Copyright © CodeProject, 1999-2014
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