asked on

I need help creating onClick Hide Show events.

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.

b0lsc0tt

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 ...

onclick="this.style.display='none';"

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.

bol

CementTruck

ASKER

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">  <CFOUTPUT>#rsGetCat.Category#</CFOUTPUT></A>
       <BR><BR></DIV>

<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">  <CFOUTPUT>#rsGetCat.Category#</CFOUTPUT></A><BR><BR>
       </DIV>

ASKER CERTIFIED SOLUTION

b0lsc0tt

membership

This solution is only available to members.

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

Start Free Trial

CementTruck

ASKER

Sorry for the delay in responding.

I FIGURED IT OUT!!!

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";
      }
      </SCRIPT>
</cfloop>

----------------------------------------------------------------


<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>
</DIV>


<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>
</DIV>

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?

CementTruck

ASKER

b0lsc0tt,

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.