What is wrong with this exapand / hide script?

Posted on 2014-10-06
Last Modified: 2014-10-06
Here's my Javascript:

<script language="JavaScript">
	function expand(param)

<script language="JavaScript">
	function hide(param)

Open in new window

...and here's my HTML

<a href="#" onclick="expand(document.g<wbr ></wbr>etElementB<wbr ></wbr>yId('div1'<wbr ></wbr>));  this.innerHTML=''; return false;">read more...</a>

<div id="div1" style="display:none;"><tab<wbr ></wbr>le width="600" border="1" align="center">stuff...</table>

<a href="#" onclick="hide(document.get<wbr ></wbr>ElementByI<wbr ></wbr>d('div1'))<wbr ></wbr>; this.innerHTML='none'; return false;">hide...</a></div>

Open in new window

Everything works as far as revealing the div, but when I go to hide it again, I can't see my "read more" link. It's there when you first click on it, but when you click on "hide," you don't see it anymore.

Where am I blowing it?
Question by:brucegust
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
LVL 17

Expert Comment

ID: 40363681
You are setting this.innerHTML=''; which is removing the text Read More...

Author Comment

ID: 40363699
Nuts. OK, how do I fix it? Seems like JavaScript is going to process the click that "hides" my div as something that simultaneously hides my "read more." How do I compensate for that?
LVL 82

Expert Comment

ID: 40363768
test page :

	function expand(param)
	{ = "block";

	function hide(param)
	{ = "none";

    window.onload = function() {
        document.getElementById("readmore").onclick = function() {
        document.getElementById("hide").onclick = function() {

Open in new window

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

LVL 17

Expert Comment

ID: 40363791
You need to assign an id to both the read more and hide links. Then you can use document.getElementById to show/hide them.
LVL 17

Assisted Solution

OriNetworks earned 200 total points
ID: 40363809
You can keep your existing javascript and reuse the functions to show/hide the read more link
<a href="#" id="lnkMore" onclick="expand(document.getElementById('div1')); hide(this); return false;">read more...</a>

<div id="div1" style="display:none;">stuff...

<a href="#" id="lnkHide" onclick="hide(document.getElementById('div1')); expand(document.getElementById('lnkMore')); return false;">hide...</a>

Open in new window

LVL 15

Accepted Solution

Jagadishwor Dulal earned 300 total points
ID: 40363811
Alternate using toggle show hide
<!doctype html>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if( == 'none')
 = 'block';
 = 'none';


<a href="#" onclick="toggle_visibility('contents');">Show/Hide Stuff</a>
<div id="contents" style="display:none"><table width="600" border="1" align="center">stuff...</table></div>

Open in new window


Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
In my daily work (mainly using, I need to write a lot of JavaScript code. One of the most repetitive tasks I do are the jQuery Ajax calls. You know: (CODE) I don't know if for you it's the same, but for me is soooo tedious to write the …
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…
Suggested Courses

622 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