/    Sign up×
Community /Pin to ProfileBookmark

Show all hide all tables

I have a document that hides a section until the user clicks on the link for that text or the show all link. The code works like a champ, the problem is that I have another document that links to some of the code that is being hidden. Because the text is hidden, the link goes to a random place somewhere near the actual link but because the text is hidden, it may be 3 or 4 places below the actual link. Is there a way to know when the other document has called this section and have it open up automatically? As an example, I have a section called processors in document A, when it is closed, the user just sees the word processors with a Plus sign next to it. When they click on the processor link, the Plus sign change to minus and the text is displayed below the processor section. There is another document, document B that has a link to the processor section in document A. If I click on the link in document B, it goes to document A but then just goes to a random section because the processor section is closed. The code is using the getElementsByName and then changing the style.display.

The actual text is wrapped in a div tag and using a more comment to determine the end of the link and the beginning of the text to hide. This allows people who have javascript disabled to see the text normally without the graphic symbols. One of the issue that complicates things is that the javascript code that would wrap the links and the text to be hidden isn’t created until the body is loaded into the Web browser, then a javascript code is used to search for the Div code and literally create the HTML code for the links and hiding of the text on the fly. This makes easier to maintain and update the document itself.

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@disgracianMar 27.2007 — This sounds like quite an interesting problem. I can't give you a definite answer now but I'll look into it, unless somebody like Kor answers it first.

Cheers,

D.
Copy linkTweet thisAlerts:
@Mr_JMar 27.2007 — Could you not use the query string to send the ID of the hidden div to the function.

Try this basic example

[B]exp_col1.htm[/B]
[code=php]<HTML>
<HEAD>
<TITLE>Expand & Collapse</TITLE>

<script type="text/javascript">
<!--
function showHideMe(id){
if(document.getElementById(id).style.display=="none"){
document.getElementById(id).style.display="block"
}
else{
document.getElementById(id).style.display="none"
}
}

onload=function(){

if (location.search.length > 0){
preNum = unescape(location.search.substring(1))
showHideMe("div"+preNum)
}

}

//-->
</script>

<style type="text/css">
.expands{
width:60px;
cursor:hand;
cursor:pointer;
background-color:yellow
}
</style>

</HEAD>
<BODY>
<h1>Page One</h1>

<a href="exp_col2.htm?1">Page 2 Div 1</a>
<a href="exp_col2.htm?2">Page 2 Div 2</a>
<a href="exp_col2.htm?3">Page 2 Div 3</a>
<BR><BR>

<div class="expands" onclick="showHideMe('div1')">Expand 1</div>
<div id="div1" style="display:none;border:1px solid #55AA55;background-color:#AFA;width:100px">
Element One
</div>
<BR><BR>
<div class="expands" onclick="showHideMe('div2')">Expand 2</div>
<div id="div2" style="display:none;border:1px solid #AA5555;background-color:#FAA;width:100px">
Element Two
</div>
<BR><BR>
<div class="expands" onclick="showHideMe('div3')">Expand 3</div>
<div id="div3" style="display:none;border:1px solid #5555AA;background-color:#AAF;width:100px">
Element Three
</div>

</BODY>
</HTML>

[/code]



[B]exp_col2.htm[/B]
[code=php]<HTML>
<HEAD>
<TITLE>Expand & Collapse</TITLE>

<script type="text/javascript">
<!--
function showHideMe(id){
if(document.getElementById(id).style.display=="none"){
document.getElementById(id).style.display="block"
}
else{
document.getElementById(id).style.display="none"
}
}

onload=function(){

if (location.search.length > 0){
preNum = unescape(location.search.substring(1))
showHideMe("div"+preNum)
}

}

//-->
</script>

<style type="text/css">
.expands{
width:60px;
cursor:hand;
cursor:pointer;
background-color:green
}
</style>

</HEAD>
<BODY>
<h1>Page Two</h1>

<a href="exp_col1.htm?1">Page 1 Div 1</a>
<a href="exp_col1.htm?2">Page 1 Div 2</a>
<a href="exp_col1.htm?3">Page 1 Div 3</a>
<BR><BR>
<div class="expands" onclick="showHideMe('div1')">Expand 1</div>
<div id="div1" style="display:none;border:1px solid #55AA55;background-color:#AFA;width:100px">
Element One
</div>
<BR><BR>
<div class="expands" onclick="showHideMe('div2')">Expand 2</div>
<div id="div2" style="display:none;border:1px solid #AA5555;background-color:#FAA;width:100px">
Element Two
</div>
<BR><BR>
<div class="expands" onclick="showHideMe('div3')">Expand 3</div>
<div id="div3" style="display:none;border:1px solid #5555AA;background-color:#AAF;width:100px">
Element Three
</div>

</BODY>
</HTML>

[/code]
Copy linkTweet thisAlerts:
@DrWho453authorMar 27.2007 — Could you not use the query string to send the ID of the hidden div to the function.

Try this basic example

[B]exp_col1.htm[/B]
[code=php]<HTML>
<HEAD>
<TITLE>Expand & Collapse</TITLE>

<script type="text/javascript">
<!--
function showHideMe(id){
if(document.getElementById(id).style.display=="none"){
document.getElementById(id).style.display="block"
}
else{
document.getElementById(id).style.display="none"
}
}

onload=function(){

if (location.search.length > 0){
preNum = unescape(location.search.substring(1))
showHideMe("div"+preNum)
}

}

//-->
</script>

<style type="text/css">
.expands{
width:60px;
cursor:hand;
cursor:pointer;
background-color:yellow
}
</style>

</HEAD>
<BODY>
<h1>Page One</h1>

<a href="exp_col2.htm?1">Page 2 Div 1</a>
<a href="exp_col2.htm?2">Page 2 Div 2</a>
<a href="exp_col2.htm?3">Page 2 Div 3</a>
<BR><BR>

<div class="expands" onclick="showHideMe('div1')">Expand 1</div>
<div id="div1" style="display:none;border:1px solid #55AA55;background-color:#AFA;width:100px">
Element One
</div>
<BR><BR>
<div class="expands" onclick="showHideMe('div2')">Expand 2</div>
<div id="div2" style="display:none;border:1px solid #AA5555;background-color:#FAA;width:100px">
Element Two
</div>
<BR><BR>
<div class="expands" onclick="showHideMe('div3')">Expand 3</div>
<div id="div3" style="display:none;border:1px solid #5555AA;background-color:#AAF;width:100px">
Element Three
</div>

</BODY>
</HTML>

[/code]



[B]exp_col2.htm[/B]
[code=php]<HTML>
<HEAD>
<TITLE>Expand & Collapse</TITLE>

<script type="text/javascript">
<!--
function showHideMe(id){
if(document.getElementById(id).style.display=="none"){
document.getElementById(id).style.display="block"
}
else{
document.getElementById(id).style.display="none"
}
}

onload=function(){

if (location.search.length > 0){
preNum = unescape(location.search.substring(1))
showHideMe("div"+preNum)
}

}

//-->
</script>

<style type="text/css">
.expands{
width:60px;
cursor:hand;
cursor:pointer;
background-color:green
}
</style>

</HEAD>
<BODY>
<h1>Page Two</h1>

<a href="exp_col1.htm?1">Page 1 Div 1</a>
<a href="exp_col1.htm?2">Page 1 Div 2</a>
<a href="exp_col1.htm?3">Page 1 Div 3</a>
<BR><BR>
<div class="expands" onclick="showHideMe('div1')">Expand 1</div>
<div id="div1" style="display:none;border:1px solid #55AA55;background-color:#AFA;width:100px">
Element One
</div>
<BR><BR>
<div class="expands" onclick="showHideMe('div2')">Expand 2</div>
<div id="div2" style="display:none;border:1px solid #AA5555;background-color:#FAA;width:100px">
Element Two
</div>
<BR><BR>
<div class="expands" onclick="showHideMe('div3')">Expand 3</div>
<div id="div3" style="display:none;border:1px solid #5555AA;background-color:#AAF;width:100px">
Element Three
</div>

</BODY>
</HTML>

[/code]
[/QUOTE]

Thank you. This code actually worked and by adding the #name after the ?number, I was able to get it to open the section and go to the section. So thank you for your help
Copy linkTweet thisAlerts:
@Mr_JMar 27.2007 — I was not sure how indepth your code was thats why I just did a basic example, glad its ok for you
×

Success!

Help @DrWho453 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.29,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...