...

View Full Version : Using separate expand/collapse links with <DIV> tags



origme
07-11-2012, 10:01 PM
Hello!

I'm new to javascripting and have been browsing around to find a good article that would give me good instructions on how to build an expand/collapse script with <DIV> tags. My main goal is to be able to click on two separate links to expand and collapse the paragraph below my article. One expand link will be on top, and then having the choice to collapse the paragraph from a link on the bottom. I've been using a script that just allows me to expand/collapse the paragraph with the "toggle" function but with one click.

Here is the script I'm currently running



<head>
<script type="text/javascript">
function toggle(obj) {
var obj=document.getElementById(obj);
if (obj.style.display == "block") obj.style.display = "none";
else obj.style.display = "block";
}
</script>
</head>

<body>
Article body info

<a onclick="toggle('m1')" href="javascript: void(0);">Expand/Collapse Notes</a>

<div style="display: none;" id="m1">
<div><p>this is the paragraph that is expanded/collapsed or I should say my study notes nested in a DIV tag</p>
</div>
</div>
</body>


Any help would be much appreciated!

Old Pedant
07-11-2012, 11:53 PM
Sorry, I'm lost.

Do you mean you want to be able to *EITHER* expand or collapse from BOTH links?

If so, just duplicate your <a> link toggler.

And it's a minor thing, but this is better:

<a onclick="toggle('m1'); return false;" href="#">Expand/Collapse Notes</a>

If you mean you want SEPARATE expand and collapse links, each doing only one action, pleas say so.

jmrker
07-12-2012, 12:14 AM
My guess ...


<html>
<head>
<script type="text/javascript">
function expand(obj) {
document.getElementById(obj).style.display = 'block';
}
function collapse(obj) {
document.getElementById(obj).style.display = 'none';
}
</script>
<style type="text/css">
.hide { display:none; }
.show { display:block; }
.rightSide { float:right; }
</style>
</head>

<body>
Article body info

<a onclick="expand('m1');return false" href="#">Expand Notes</a>
<blockquote class="hide" id="m1">
<p>
this is the paragraph that is expanded/collapsed or I should say my study notes nested in a DIV tag
<p> <a href="#" onclick="collapse('m1');return false" class="rightSide"> Collapse Notes </a>
</p>
</blockquote>
</body>
</html>

Remove class="rightSide" if you don't like anchor on the extreme right side.

Old Pedant
07-12-2012, 12:24 AM
Well, yeah, but if it's that simple, why bother with functions?


<a onclick="document.getElementById('m1').style.display='block';return false" href="#">Expand Notes</a>
<blockquote class="hide" id="m1">
<p>
this is the paragraph that is expanded/collapsed or I should say my study notes nested in a DIV tag
<p> <a href="#" onclick="document.getElementById('m1').style.display='none';return false" class="rightSide"> Collapse Notes </a>
</p>
</blockquote>

origme
07-12-2012, 03:03 AM
Hey Old Pedant & jmrker,

Thanks for the response!

You both got me in the right direction and the getElementById works great for having two functions act independently on their own. However, when I click on the collapse link, it causes the page to shoot toward the bottom like I've triggered an anchor to send it to it's target of the footer of the page?!? I do have a lot more info below where I will have the same effect with the paragraphs; I've checked all of my code. All the DIV tags are closed, etc., and the site is displaying correctly. :confused:

I did do some searching before I got an answer and found this small snippet of code that used a <table> layout and ended up changing it a little to my liking...



<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
function ec(h) {
var doc = document.getElementById('doc');
doc.style.display = h;
}
// -->
</script>
</head>

<p>some text before ...</p>

<a href="javascript:ec('block')">...expand notes</a>

<div id=doc name=doc style="overflow:hidden;display:none;">
the hidden text

<a href="javascript:ec('none')">[collapse]</a>
</div>

<p>Some text after ...</p>


Then I used the examples given here provided by both of you and it shoots me to the very top of the page, at the beginning of the article?? Any ideas why it might be doing this? I'm assuming it's because of the "return true" statement in the anchor. As a matter of fact, I can call "return false" and it still shoots me to the very top of the page.

Thanks again for you the help!

jmrker
07-12-2012, 03:58 AM
Show the full code that you are currently using
or a link to a live page to see the problem.

Old Pedant
07-13-2012, 07:46 PM
I showed you the correct way to use an <a> tag for this purpose.

The use of href="javascript:..." is obsolete and discouraged.



<a href="#" onclick="ec('block'); return false;">...expand notes</a>

Or, if all your onclick functions *DO* return false:


<script type="text/javascript">
function ec(h) {
var doc = document.getElementById('doc');
doc.style.display = h;
return false;
}
</script>
...
<a href="#" onclick="return ec('block');">...expand notes</a>

Further:

-- language="..." in a <script> block is long obsolete. Don't use it.
-- the need for <!-- and //--> in <script> blocks disappeared when MSIE 3 died, about 1997 or 1998

Old Pedant
07-13-2012, 07:48 PM
Oh...and finally: There's really no reason you *HAVE* to use <a> tags for this, you know.

Again, the need to do so died when MSIE 5 appeared. About 2001 or so.



<span onclick="ec('block');">...expand notes</span>
or
<div onclick="ec('block');">...expand notes</div>

will work just fine and you don't have to worry about return.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum