Avatar of Panos
PanosFlag for Germany asked on

Show hide elements in repeat region

Hello experts
I have a nice solution from expert Johnsixkiller in question:https://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_23416613.html.
The question is how can i use this function in a repeat region?

<script>
  function showHide(Sender){
     var oTBody = document.getElementById("tbody"+Sender.id.substring(7));
     if(oTBody.style.display == 'none'){
       oTBody.style.display = '';
       Sender.src = '../../img/Arrowdown.gif'
     } else {
       oTBody .style.display = 'none';
       Sender.src = '../../img/Arrowup.gif'
     }
  }
</script>
<body>
<div> 
<cfoutput query="qPark" startRow="#StartRow_qPark#" maxrows="#MaxRows_qPark#">
<table cellpadding="0"cellspacing="0"  class="tablePark" border=1>
  <tr>
    <td>Test:</td>
    <td>test</td>
  </tr>
 <tr>
 <td colspan="2">
 <img onclick='showHide(this)' id="imgPlus1" src="../../img/Arrowdown.gif" alt='xxx'/></td>
 </tr>
<tbody  id='tbody1' style='display:none'>
<tr><td class="ExtrasTD" colspan="2" >#Test#</td></tr></tbody>
</table>
</cfoutput
</div>
</body>
</html>

Open in new window

JavaScript

Avatar of undefined
Last Comment
JohnSixkiller

8/22/2022 - Mon
krishna kishore mellacheruvu venkata

Can you post the whole code plz?
krishna kishore mellacheruvu venkata

I am not able to understand exactly what  you want.
JohnSixkiller

Hi, again :)

This should work:
<script>
  function showHide(Sender,index){
     var oTBody = document.getElementById("tbody"+index);
     if(oTBody.style.display == 'none'){
       oTBody.style.display = '';
       Sender.src = '../../img/Arrowdown.gif'
     } else {
       oTBody .style.display = 'none';
       Sender.src = '../../img/Arrowup.gif'
     }
  }
</script>
<body>
<div> 
<cfoutput query="qPark" startRow="#StartRow_qPark#" maxrows="#MaxRows_qPark#">
<table cellpadding="0"cellspacing="0"  class="tablePark" border=1>
  <tr>
    <td>Test:</td>
    <td>test</td>
  </tr>
 <tr>
 <td colspan="2">
 <img onclick='showHide(this,#qPark.currentRow#)' id="imgPlus1" src="../../img/Arrowdown.gif" alt='xxx'/></td>
 </tr>
<tbody  id='tbody#qPark.currentRow#' style='display:none'>
<tr><td class="ExtrasTD" colspan="2" >#Test#</td></tr></tbody>
</table>
</cfoutput>
</div>
</body>
</html>

Open in new window

This is the best money I have ever spent. I cannot not tell you how many times these folks have saved my bacon. I learn so much from the contributors.
rwheeler23
ASKER
Panos

Hi melchkishore.
I have tested the code in a normal table.
What i'm trying now to do is to use these in a page with a recorset with a cfoutput query.
When i have 3 results for example i will have the table(with class tablepark) 3 times in my page.
That what i want is when i click on one arrow on a any of the three(now in my example),all the Tbody that are now hidden will be shown  and the opposite.
i hope you did understand me now

<cfquery name="qPark" datasource="#dsn#">
SELECT  Art_ID,test
From artikel
Where art_id in (#url.art_idList#)
</cfquery>
<cfset MaxRows_qPark =10>
<script>
  function showHide(Sender){
     var oTBody = document.getElementById("tbody"+Sender.id.substring(7));
     if(oTBody.style.display == 'none'){
       oTBody.style.display = '';
       Sender.src = '../../img/Arrowdown.gif'
     } else {
       oTBody .style.display = 'none';
       Sender.src = '../../img/Arrowup.gif'
     }
  }
</script>
 
<body>
<div> 
<cfoutput query="qPark" startRow="#StartRow_qPark#" maxrows="#MaxRows_qPark#">
<table cellpadding="0"cellspacing="0"  class="tablePark" border=1>
  <tr>
    <td>Test:</td>
    <td>test</td>
  </tr>
 <tr>
 <td colspan="2">
 <img onclick='showHide(this)' id="imgPlus1" src="../../img/Arrowdown.gif" alt='xxx'/></td>
 </tr>
<tbody  id='tbody1' style='display:none'>
<tr><td class="ExtrasTD" colspan="2" >#Test#</td></tr></tbody>
</table>
</cfoutput
</div>
</body>

Open in new window

ASKER
Panos

Hi again JohnSixkiller.
As you now see i need the code to show all the tables!
ASKER CERTIFIED SOLUTION
JohnSixkiller

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
See how we're fighting big data
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
ASKER
Panos

thank you.
regards
Panos
Get an unlimited membership to EE for less than $4 a week.
Unlimited question asking, solutions, articles and more.
JohnSixkiller

Always glad to help ;)