Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Expand/Collapse blocks of text.

Posted on 2002-05-20
3
Medium Priority
?
630 Views
Last Modified: 2010-08-05
The output below was generated by an html help aplication. I have added the java script and implementation of doExpand. My goal is to be able to expand/collapse sections of the document. As you will see I have 2 blocks that I want this to work with but I can't seem to get working. When I click the first section it collapses everything. When I click the 2nd section it collapses nothing. Perhaps I need a better script? The one listed in this document was listed in an example of the html help application I am using. Any insight would be apprecitated.

Thanks!


<html>
<head>
   <title>Expanding Sections in Action</title>
   <meta name="generator" content="Help & Manual">
   <meta name="keywords" content="">
   <style type="text/css">
      #nsr
       {
       padding: 6px 6px 0px 6px;
       border-bottom: none;
       background: #C0C0C0;
       vertical-align: top;
       z-index: 2;
       visibility: visible;
       left: 0;
       top: 0;
       position: absolute;
       width: 100%;
       }
      #mainbody
       {
       left: 0;
       top: 0px;
       margin: 0;
       position: absolute;
       padding: 10px;
       overflow: auto;
       height: 100%;
       z-index: 1;
       background-repeat: no-repeat;
       background-position: bottom right;
       background-attachment: fixed;
       }
   </style>
   <script type="text/javascript" language="JavaScript" src="nonscroll.js"></script>
<script language="JavaScript">
function doExpand(paraNum) {
if (paraNum.style.display=="none") {paraNum.style.display=""; }
else {paraNum.style.display="none"; }
}
</script>
</head>
<body bgcolor="#FFFFFF" scroll="no">



<div id="mainbody">

<p align="center"><span style="font-family:Helvetica,Arial; font-size:12pt; color:#000000"><u><!--JavaScript - this script is used by both sections-->



<br>
</u></p><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:12pt; color:#000000"><p align="center"></span><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000"></p></span></td></tr></table><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000"></span><span style="font-family:Helvetica,Arial; font-size:12pt; color:#000000"><u><!-- Start 2. Section -->
<a onclick="doExpand(section1)" href="#dummy">
<border=0>
<b>This is the heading of the 1st section</b>
</a>
<DIV ID="section1" STYLE="display:;">


<br>
</u><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:12pt; color:#000000"></span></span><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">1
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">2
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">3
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">4
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">5
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">6
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">7
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">8
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">9
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">10
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000"></span></td></tr></table><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000"><!--End 2. Section-->
</DIV>

&nbsp;<br>
<a onclick="doExpand(section2)" href="#dummy">
<border=0>
<b>This is the heading of the 2nd section</b>
</a>
<DIV ID="section2" STYLE="display:;">
</span></span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000"></span><span style="font-family:Helvetica,Arial; font-size:9pt; color:#000000">Following Should Always be displayed!!!
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:9pt; color:#000000">1
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:9pt; color:#000000">2
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:9pt; color:#000000">3
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:9pt; color:#000000">4
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:9pt; color:#000000">5
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:9pt; color:#000000">6
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:9pt; color:#000000">7
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:9pt; color:#000000">8
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:9pt; color:#000000">9
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:9pt; color:#000000"></span></td></tr></table><span style="font-family:Helvetica,Arial; font-size:9pt; color:#000000">  10</span><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">
<br>
</DIV>
</span></span>
</div>

</body>
</html>

0
Comment
Question by:WDB
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 2

Accepted Solution

by:
jpoesen earned 400 total points
ID: 7021956
<html>
<head>
<style>
  .header {font-family:Helvetica,Arial; font-size:12pt; color:blue;cursor:hand}
  .content {font-family:Helvetica,Arial; font-size:9pt; color:#000000;padding-left:5}
  #sub1,#sub2 {display:block}
</style>
<script>
function showHide(elementID){
var element = document.getElementById(elementID)
if (element.style.display == "block") element.style.display = "none"
else element.style.display = "block"
}  
</script>
</head>
<body>

<span class="header" id="header1" onClick="showHide('sub1')">SECTION 1</span>
<div class="content" id="sub1">
1<br>2<br>3<br>4<br>5
</div>

<span class="header" id="header2" onClick="showHide('sub2')">SECTION 2</span>
<div class="content" id="sub2">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10
</div>

</body>
</html>

this is a bit shorter, cleaner and it works.

jpoesen
0
 
LVL 2

Author Comment

by:WDB
ID: 7022079
thanks. the code is shorter and cleaner. I don't know why the generator tries to get so creative. It turns out I had the same problem even with the new code and it turns out to be some kind of margin problem that's causing the generator to f*** up the code. Anyway, I appreciate your comment and you deserve the points.
0
 
LVL 2

Expert Comment

by:jpoesen
ID: 7022173
thanks :)
0

Featured Post

The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question