Member Avatar for dhru1

Hello,

I have a html page and a drop down menu on top. The drop down menu is for like users. The user has to pick their role and based on that, the page will only show some parts of the content.

So I have the drop down on top (e.g Developer, Editor, etc) and based on what they pick, hide the contents that they're not supposed to see.

Is this possible with HTML? What do I need to do?

  • 3 Contributors
  • 2 Replies
  • 49 Views
  • 15 Hours Discussion Span
  • Latest Post Latest Post by teedoff

Dani AI

Generated

Short answer: HTML alone cannot do this. You either toggle visibility with JavaScript on the client, or (preferably for anything sensitive) decide what to render on the server. is right to point you toward scripting, and ’s server-side note (Coldfusion, PHP, etc.) is the secure route. If users are not supposed to see something, do not send it to the browser at all; client-side hiding is trivial to bypass OWASP.

If you only need a UI filter (not security), here is a simple, accessible pattern using the native [hidden] attribute and the select’s change event:

<select id="role">
  <option value="">Choose a role...</option>
  <option value="developer">Developer</option>
  <option value="editor">Editor</option>
</select>

<style>
  [hidden] { display: none !important; }
</style>

<section data-roles="developer" hidden>Dev-only content</section>
<section data-roles="editor developer" hidden>Shared content</section>
<section data-roles="editor" hidden>Editor-only content</section>

<script>
  const select = document.getElementById('role');
  const blocks = document.querySelectorAll('[data-roles]');

  function applyRole(role) {
    blocks.forEach(el => {
      const list = el.dataset.roles.split(/\s*,\s*|\s+/);
      el.hidden = !role || !list.includes(role);
    });
  }

  select.addEventListener('change', e => applyRole(e.target.value));
  applyRole(select.value);
</script>

Notes:

  • [hidden] hides content visually and from screen readers, which is better than a CSS class for this use case MDN.
  • To prevent a brief flash of all content, start sections as hidden in HTML and reveal only what matches after selection.
  • For real role-based access, render only allowed sections from the server (sessions/ACL) and never ship restricted markup to the client.

Recommended Answers

All 2 Replies

Member Avatar for ko ko

Better post at PHP or Javascript forum.

Member Avatar for teedoff

or Coldfusion! :)

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.