I need help creating onClick Hide Show events.

Posted on 2007-08-08
Medium Priority
Last Modified: 2013-11-05
I've created these functions in the past, but always with static information. This time I a creating a catalog from a DB Table and I will need the page to create the onClick show and onClick hide entries automatically. I use ColdFusion for the queries, but need to know if there is some wildcard I can use in Javascript to get this to work. I hope I explained this properly.

I don't have any code to show since I have no idea where to begin.
Question by:CementTruck
  • 3
  • 2
LVL 54

Expert Comment

ID: 19656597
Your details are a little vague but the most common "wildcard" is this.  If the element clicked on is the one that needs to have the action performed then something like the code below will do it ...


That would hide the element.  Of course you can't show it by clicking on it for obvious reasons.  However if there is something similar between all elements (i.e. tag name, class, etc) then you can use a general script to show all and then hide the clicked element.

This is just one example but please provide details of the type of element and what needs to be done.  The attributes and properties you use in the element will be important too.  Let me know if you have a question.


Author Comment

ID: 19656736
I apologize for the vague example. The code below is more of what I'm looking for. I already have this code working on another page, but need to automate the naming of a function every time a new title is introduced into the database table.  I'm almost positive this will require looping the query, but that is a CF question.

Thanks for responding.

function acct()
   document.getElementById('hideacct').style.display = "inline";
  document.getElementById('showacct').style.display = "none";

function accthide()
  document.getElementById('hideacct').style.display = "none";
  document.getElementById('showacct').style.display = "inline";


 <DIV ID="show<CFOUTPUT>#rsGetCat.tag#</CFOUTPUT>" STYLE="display:inline">
              <A HREF="#" onClick="<CFOUTPUT>#rsGetCat.Tag#</CFOUTPUT>()" STYLE="text-decoration : none;"><IMG SRC="Images/icon_greencircle_plus.gif" BORDER="0">&nbsp;&nbsp;<CFOUTPUT>#rsGetCat.Category#</CFOUTPUT></A>
      <DIV ID="hide<CFOUTPUT>#rsGetCat.tag#</CFOUTPUT>" STYLE="display:none">
              <A HREF="#" onClick="<CFOUTPUT>#rsGetCat.Tag#</CFOUTPUT>hide()" STYLE="text-decoration : none;"><IMG SRC="Images/icon_redcircle_minus.gif" BORDER="0">&nbsp;&nbsp;<CFOUTPUT>#rsGetCat.Category#</CFOUTPUT></A><BR><BR>
LVL 54

Accepted Solution

b0lsc0tt earned 750 total points
ID: 19656967
On the new page will there still only be 2 elements, both divs and one will show the other hide?  I have an idea that is part of what is changing but those are the details I need.  How many do you want to show and hide?

Thanks for the code from the previous page but what I really need is a better idea of what will be on the page and how you want the script to work.  I know that it will be on a click event but it that clicked on the element itself or some other element?  I assume clicking will hide the element but please confirm that and let me know when it would appear again.  What should happen to the other elements?  What does the rest of the page look like and what are the attributes?

For the attributes and the other details please provide the html source and not what the coldfusion code would be (I am not a CF expert and not sure what the values from the variables would be). :)

A simple example that assumes these are all divs, clicking on the div hides it and only one hidden at a time.  The function to do that would be ...

function showHide(ele) {
    var divs = document.getElementsByTagName('div');
    for (var i=0; i<divs.length; i++) {
        divs[i].style.display = 'inline';
    ele.style.display = 'none';

You would have the onclick event in each div look like ...


That is just a simple example and based on a simple page.  I hope it helps but other wise I need all the questions above answered.


p.s. Occasionally I have had a problem "showing" something with 'inline', 'block', etc.  If that line doesn't work to show the divs then try ...

        divs[i].style.display = '';

That is 2 singles quotes and erase the none value.  The style should use the default setting which is usually to show.  Just some extra info that may help. :)

Author Comment

ID: 19662883
Sorry for the delay in responding.


Here's the code -
<cfloop query="CatalogHeader">
      <SCRIPT LANGUAGE="Javascript" TYPE="text/javascript">
      function ShowMe<cfoutput>#CatalogHeader.RecID#</cfoutput>()
            document.getElementById('Minus<cfoutput>#CatalogHeader.RecID#</cfoutput>').style.display = "inline";
            document.getElementById('Plus<cfoutput>#CatalogHeader.RecID#</cfoutput>').style.display = "none";
      function HideMe<cfoutput>#CatalogHeader.RecID#</cfoutput>()
            document.getElementById('Minus<cfoutput>#CatalogHeader.RecID#</cfoutput>').style.display = "none";
            document.getElementById('Plus<cfoutput>#CatalogHeader.RecID#</cfoutput>').style.display = "inline";


<!---This Div displays the tabbed index title and a plus sign only.--->
<DIV ID="Plus<cfoutput>#CatalogHeader.RecID#</cfoutput>" STYLE="display:inline">
<A HREF="#" class="style11" STYLE="text-decoration : none;" onClick="ShowMe<cfoutput>#CatalogHeader.RecID#</cfoutput>()">
                                          <img src="Catalog/icon_GreenCircle_plus.gif" border="0"><CFOUTPUT> #CatalogHeader.Nomenclature#</CFOUTPUT></A><BR>
<!---This Div displays the tabbed index title and a minus sign. It also displays all sub headings, page numbers and links.--->
<DIV ID="Minus<cfoutput>#CatalogHeader.RecID#</cfoutput>" STYLE="display:none">
<A HREF="#" class="style11" STYLE="text-decoration : none;" onClick="HideMe<cfoutput>#CatalogHeader.RecID#</cfoutput>()">
<img src="Catalog/icon_RedCircle_minus.gif" border="0"><CFOUTPUT> #CatalogHeader.Nomenclature#</CFOUTPUT></A><BR>

Now I've got a different issue. When I click on the link/icon to expand the hidden items the page displays the idden stuff, but thit also jumps back to the top of the page. I then have to scroll down to the part of the page that I just clicked on. Can you help with this? Is this an anchor tag fix?

Author Comment

ID: 19664000

I figured out the jumping buit as well.

I had href="#" in my anchor tags for some reason and took that out. It works like a champ.

Featured Post


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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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

621 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