Member Avatar for coolmind259

Hi there,

I need to show and hide functionality through javascript , how can I achieve this.

If I click on a dash link then show particular section and if I click again then it should be hide.

Is there is any script I can use?

Please reply.

  • 3 Contributors
  • 2 Replies
  • 114 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by mail2saion

Dani AI

Generated

A few practical additions to the replies by , and — the approach below keeps things accessible, allows a smooth slide animation, and avoids repeatedly writing inline display hacks.

Use a semantic toggle control (preferably a button) with aria-expanded/aria-controls, then animate height instead of display. Toggling display:none cannot be animated; using max-height plus a short JS helper that measures element.scrollHeight gives a smooth slide open/close and lets content size vary.

Example pattern (HTML + CSS + vanilla JS):

<button class="toggle" aria-expanded="false" aria-controls="panel-1">−</button>
<div id="panel-1" class="panel">
  <p>Your content here</p>
</div>
.panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height 300ms ease;
}
.panel.is-open {
  /* fallback; JS will set exact max-height for smooth animation */
  max-height: 1000px;
}
document.addEventListener('click', function (e) {
  const btn = e.target.closest('.toggle');
  if (!btn) return;
  const panel = document.getElementById(btn.getAttribute('aria-controls'));
  const open = btn.getAttribute('aria-expanded') === 'true';

  if (open) {
    // animate from current height to zero
    panel.style.maxHeight = panel.scrollHeight + 'px';
    panel.offsetHeight; // force reflow
    panel.style.maxHeight = '0';
    btn.setAttribute('aria-expanded', 'false');
    panel.classList.remove('is-open');
  } else {
    // expand to content height
    panel.style.maxHeight = panel.scrollHeight + 'px';
    btn.setAttribute('aria-expanded', 'true');
    panel.classList.add('is-open');
  }

  panel.addEventListener('transitionend', function handler() {
    if (btn.getAttribute('aria-expanded') === 'true') panel.style.maxHeight = '';
    panel.removeEventListener('transitionend', handler);
  });
});

Troubleshooting tips: ensure overflow: hidden on the panel; images inside should be loaded before measuring height (or re-measure after load); prefer button to anchors (or call event.preventDefault() for links). For details on the APIs used see Element.scrollHeight and aria-expanded.

Recommended Answers

All 2 Replies

Member Avatar for mail2saion

YOU CAN USE THE BELOW SCRIPT TO ACHIEVE YOUR REQUIREMENT:

function showHide(elemId)
        {
            if(document.getElementById(elemId).style.display == "none")
                document.getElementById(elemId).style.display = "block"
            else
                document.getElementById(elemId).style.display = "none"
        }

CALL THIS METHOD FROM YOUR LINK & SEND YOUR DIV WHICH YOU WANT TO SHOW/HIDE. FOR EAXAMPLE:

<a href="#" onclick="showHide('divcheckpoint');" >
commented: Ahhhh the caps :l +0
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.