Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

showhide

Posted on 2011-11-01
23
Medium Priority
?
213 Views
Last Modified: 2012-05-12
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>
<span id='p2' style='display:none'>

<!--
      function showhide(targetID) {
            //change target element mode
            var elementmode = document.getElementById(targetID).style;
            elementmode.display = (!elementmode.display) ? 'none' : '';
      }

      function changetext(changee,oldText,newText) {
            //changes text in source element
            var elementToChange = document.getElementById(changee);
            elementToChange.innerHTML = (elementToChange.innerHTML == oldText) ? newText : oldText;
      }

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

      // Cruft note: The content of "oldContent," the third argument of the
      // workforchange() function, must match the existing content of the changer text.

// -->

0
Comment
Question by:singleton
  • 10
  • 10
  • 3
23 Comments
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 37062174
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

0
 
LVL 11

Author Comment

by:singleton
ID: 37063482
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>
<span id='p2' style='display:none'>

text to hide

</span>

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
0
 
LVL 6

Expert Comment

by:judgeking
ID: 37064216
Please post your entire HTML
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 11

Author Comment

by:singleton
ID: 37064315
0
 
LVL 6

Expert Comment

by:judgeking
ID: 37065965
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:

<span id='p1' style='display:'>
<!-- current news items here -->
</span>
0
 
LVL 11

Author Comment

by:singleton
ID: 37066573
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
0
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 37067810
      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

0
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 37067811
  <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

0
 
LVL 6

Expert Comment

by:judgeking
ID: 37070866
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>

<span id='p1' style='display:none'>


Also, the workforchange function you posted has 4 parms.
0
 
LVL 11

Author Comment

by:singleton
ID: 37071113
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>
<span id='p1' style='display:none'>

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 </span> tags?
0
 
LVL 6

Expert Comment

by:judgeking
ID: 37071279
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?
0
 
LVL 11

Author Comment

by:singleton
ID: 37071485
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
0
 
LVL 6

Expert Comment

by:judgeking
ID: 37071779
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.
0
 
LVL 6

Expert Comment

by:judgeking
ID: 37071975
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
0
 
LVL 11

Author Comment

by:singleton
ID: 37071985
Yes, local looks for local css files. Sorry aI should have given the URL as well when I was asked for local files
0
 
LVL 6

Expert Comment

by:judgeking
ID: 37072162
No problem, but note that the file that I attached above is using absolute references to your files.
0
 
LVL 11

Author Comment

by:singleton
ID: 37072321
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>
<span id='p1' style='display:none'>
<!-- Start hidden earlier items left column-->

and
<a class="hideshownav" href="javascript:workforchange('p2','changer2','Show earlier items','Hide earlier items');" id='changer2'>Show earlier items</a>
<span id='p2' style='display:none'>
<!-- Start hidden earlier items right column -->

over to mine, and no change, but yours work
0
 
LVL 6

Accepted Solution

by:
judgeking earned 2000 total points
ID: 37072499
Looks like you're missing the </span> tag(s).  Check for the 'End hidden earlier' comments, and make sure there's an end tag after it.

<!-- End hidden earlier items left column -->
</span>
</div>
<!-- End left column -->


<!-- End hidden earlier items right column -->
</span>
</div>
<!-- End right column -->
0
 
LVL 11

Author Closing Comment

by:singleton
ID: 37072605
Are you saying the <!-- End right column --> is not just a comment?

I just went ahead and used your file
0
 
LVL 6

Expert Comment

by:judgeking
ID: 37072728
Thanks, glad I could help.
0
 
LVL 11

Author Comment

by:singleton
ID: 37072749
Is <!-- End right column --> just a comment, or is it something Javascript looks for?
0
 
LVL 6

Expert Comment

by:judgeking
ID: 37072797
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):

</span>
</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.
0
 
LVL 11

Author Comment

by:singleton
ID: 37072827
It had the </span>

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

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

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…
This article discusses how to create an extensible mechanism for linked drop downs.
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

578 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