Member Avatar for swanqute

I need a code that hides the content when clicked and reveal them on demand using javascript.
This is in webdesigning

anyone to help

  • 3 Contributors
  • 4 Replies
  • 195 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by Shanti C

Dani AI

Generated

's reply shows the basic idea: toggle an element's visibility with JavaScript. Two practical improvements make this more robust and accessible (and answer 's "where to put this code"): avoid inline onClick handlers, and toggle a CSS class rather than forcing an element's inline display value (setting a table to inline can break layout). Put CSS in the site stylesheet or the page head, keep the markup where the content belongs, and load the script at the end of the body or inside a DOMContentLoaded handler so the DOM exists before the script runs.

A modern, unobtrusive pattern (keeps content accessible and degrades gracefully):

/* stylesheet */
.hidden { display: none; }
<button type="button" data-toggle="#panel" aria-expanded="false" aria-controls="panel">Show details</button>

<div id="panel" class="hidden">
  <!-- any content here (table, form, etc.) -->
</div>
// place in an external file or before </body>
document.addEventListener('click', function (e) {
  var btn = e.target.closest('[data-toggle]');
  if (!btn) return;
  var sel = btn.getAttribute('data-toggle');
  var panel = document.querySelector(sel);
  if (!panel) return;
  var isHidden = panel.classList.toggle('hidden'); // class-based show/hide
  btn.setAttribute('aria-expanded', (!isHidden).toString());
});

Troubleshooting and best practices: confirm selectors/IDs match exactly; ensure the script runs after the DOM; check for CSS specificity or !important rules that override the .hidden class; prefer a button (keyboard + screen-reader friendly) over a href="#"; if the element is a table and needs to be shown with its native display, let CSS define that (for example, do not set display: inline—use display: table or simply remove the hidden class). For smooth show/hide animation, transition max-height with overflow: hidden or measure scrollHeight in JS; avoid animating display.

Recommended Answers

All 4 Replies

Member Avatar for Shanti C

This can achieve by simple java script function:
this is your table having some design:

<table width="291" id="prl" style="display:none">
      <tr>
      <td width="95">message</td>
      <td width="196"><input name="message" type="text" id="message" ></td>
       </tr>
       <tr>
        <td>name</td>
        <td><input name="name" type="text" id="name"></td>
        </tr>
      </table>

This the the link to show or hide your content:

<a href="#" onClick="toggle_it('prl')">show</a>

and also
include this script in your page:

<script language="javascript">
       function toggle_it(itemID){
        // Toggle visibility between none and inline
        if ((document.getElementById(itemID).style.display == 'none'))
        {
   document.getElementById(itemID).style.display = 'inline';
  
      } else {
  document.getElementById(itemID).style.display = 'none';
  
      }
        }
      </script>
Member Avatar for swanqute

thanks checking it out

This can achieve by simple java script function:
this is your table having some design:

<table width="291" id="prl" style="display:none">
      <tr>
      <td width="95">message</td>
      <td width="196"><input name="message" type="text" id="message" ></td>
       </tr>
       <tr>
        <td>name</td>
        <td><input name="name" type="text" id="name"></td>
        </tr>
      </table>

This the the link to show or hide your content:

<a href="#" onClick="toggle_it('prl')">show</a>

and also
include this script in your page:

<script language="javascript">
       function toggle_it(itemID){
        // Toggle visibility between none and inline
        if ((document.getElementById(itemID).style.display == 'none'))
        {
   document.getElementById(itemID).style.display = 'inline';
  
      } else {
  document.getElementById(itemID).style.display = 'none';
  
      }
        }
      </script>
Member Avatar for cakka

Hi, thanks for your support.
But where i must put this codes ?
Are in a variable ?

Thanks

<table width="291" id="prl" style="display:none">
<tr>
<td width="95">message</td>
<td width="196"><input name="message" type="text" id="message" ></td>
</tr>
<tr>
<td>name</td>
<td><input name="name" type="text" id="name"></td>
</tr>
</table>

Member Avatar for Shanti C

Hi, thanks for your support.
But where i must put this codes ?
Are in a variable ?

Thanks

Fine..
no,any where in your html code...means, any where in your page inside html tags...

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.