asked on

showhide

I have a webpage with two columns and I use a showhide javascript to show or hide part of the material. I want to adapt it to work on both columns, independently, where either column can show or hide material. What do I need to do?

<a class="hideshownav" href="javascript:workforchange('p2','changer2','Show
earlier items','Hide earlier items');" id='changer2'>Show earlier items</a>

chaitu chaitu

you mean like this..

 <BODY>
  <a class="hideshownav" href="javascript:workforchange('changer2','Show 
earlier items','Hide earlier items');" id='changer2'>Show earlier items</a>
<script>

      function changetext(changee,oldText,newText) {
            var elementToChange = document.getElementById(changee);
            elementToChange.innerHTML = (elementToChange.innerHTML == oldText) ? newText : oldText;
      }

      function workforchange(sourceID,oldContent,newContent) {
            changetext(sourceID,oldContent,newContent);
      }
</script>

 </BODY>
</HTML>

Open in new window

singleton

ASKER

I don't understand.

The one that works on one column I have

text to always be visible

<a class="hideshownav" href="javascript:workforchange('p2','changer2','Show
earlier items','Hide earlier items');" id='changer2'>Show earlier items</a>


text to hide



but if I put that same code in the other column it does not work

I tried changing the 2s to 1s for the other column, but that did not work either

judgeking

Please post your entire HTML

singleton

ASKER

index.html

judgeking

OK, if you're talking about adding 'Hide current items' functionality similar to your current 'Show earlier items', add the below link before the current news items:

<a class="hideshownav" href="javascript:workforchange('p1','changer1','Show current items','Hide current items');" id='changer1'>Hide current items</a>

And add this span tag around your current news items:

singleton

ASKER

default on yours seems to be show, while my current one defaults to hide

also you seem to be calling workforchange with 4 parameters and it has three

chaitu chaitu

      function changetext(changee,oldText,newText) {
            var elementToChange = document.getElementById(changee);
            elementToChange.innerHTML = (elementToChange.innerHTML == oldText) ? newText : oldText;
			document.getElementById("p1").style.display='block';
			document.getElementById("p1").innerHTML=(elementToChange.innerHTML == oldText) ? newText : oldText;
      }

      function workforchange(sourceID,oldContent,newContent) {
            changetext(sourceID,oldContent,newContent);
      }

Open in new window

chaitu chaitu

  <a class="hideshownav" href="javascript:workforchange('changer2','Show 
earlier items','Hide earlier items');" id='changer2'>Show earlier items</a>

<span id='p1' style='display:none'>
<!-- current news items here -->
Show earlier items
</span>

Open in new window

judgeking

Are you saying you want the 'current items' to be hidden by default? If so, just change the A and SPAN tags to below:

<a class="hideshownav" href="javascript:workforchange('p1','changer1','Show current items','Hide current items');" id='changer1'>Show current items</a>



Also, the workforchange function you posted has 4 parms.

singleton

ASKER

Sorry you are right, I was looking at the one another expert posted that had three.

Both columns are latest on top, so the ones I want to had are earlier items, not current items, so I tried using

<a class="hideshownav" href="javascript:workforchange('p1','changer1','Show earlier items','Hide earlier items');" id='changer1'>Show earlier items</a>


But the ones in the p1 column show either way, while the ones in the p2 column hide and display just fine.

What am I missing? do I need an id on the tags?

judgeking

I'm sorry, I don't understand what you're saying.

For one thing, I don't see any columns in your page. I see 2 sections, top and bottom. The top section seems to be current items, which is visible, and the bottom section is earlier items, which is hidden by default.

Do you want to add show/hide functionality to this top (current) section? If so, do you want it visible or hidden by default?

singleton

ASKER

The page is http://apcug.net/

Two columns, User Group News and APCUG News

At the bottom of User Group News Dont take Volunteers for Granted should be visible but not Friends Helping Friends

In APCUG News July 23 - Contest Results is visible, but not July 15 - 2011 Ohio Regional Conference, which is hidden until you click it

judgeking

Ah, now I see the columns. Sorry, my local copy of your page wasn't picking up your CSS files. Let me have a look, I'll post back shortly.

judgeking

OK, I think I have what you need. I've modified your page, and put in tags for the start and end of the 'earlier items'. Put whatever you want hidden in the left or right column in its 'hidden earlier items' section.
index.html

singleton

ASKER

Yes, local looks for local css files. Sorry aI should have given the URL as well when I was asked for local files

judgeking

No problem, but note that the file that I attached above is using absolute references to your files.

singleton

ASKER

What else did you change?

I moved
<a class="hideshownav" href="javascript:workforchange('p1','changer1','Show earlier items','Hide earlier items');" id='changer1'>Show earlier items</a>



and
<a class="hideshownav" href="javascript:workforchange('p2','changer2','Show earlier items','Hide earlier items');" id='changer2'>Show earlier items</a>



over to mine, and no change, but yours work

ASKER CERTIFIED SOLUTION

judgeking

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

singleton

ASKER

Are you saying the  is not just a comment?

I just went ahead and used your file

judgeking

Thanks, glad I could help.

singleton

ASKER

Is  just a comment, or is it something Javascript looks for?

judgeking

No, it's just a comment, I was just showing you what those sections of the page should look like. All you really need is the end-span and end-div tags (in both sections):


</div>

The p1 span tag is new, so if you added it to your file, you need to make sure you add the end-tag.

singleton

ASKER

It had the 

Beats me. It works now and that is what is important