hide content based on drop down link

[Walalayo]

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?

[Exiterra]

 it is possible to achieve this functionality with HTML. However, HTML alone cannot handle the dynamic hiding/showing of content based on user selection. You would need to combine HTML with JavaScript or any other scripting language to achieve this interactive behavior.

Here's a basic example of how you can accomplish this using HTML and JavaScript:

1. First, create your HTML structure including the dropdown menu and the content sections that you want to hide/show.

```html
<select id="user-role" onchange="updateContent()">
  <option value="developer">Developer</option>
  <option value="editor">Editor</option>
</select>

<div id="developer-content">
  <!-- Content visible only to developers -->
</div>

<div id="editor-content">
  <!-- Content visible only to editors -->
</div>
```

2. Next, write a JavaScript function that will be called whenever the user selects an option from the dropdown menu.

```javascript
function updateContent() {
  var selectedRole = document.getElementById("user-role").value;
 
  // Hide all content sections
  document.getElementById("developer-content").style.display = "none";
  document.getElementById("editor-content").style.display = "none";
 
  // Show the appropriate content section based on the selected role
  if (selectedRole === "developer") {
    document.getElementById("developer-content").style.display = "block";
  } else if (selectedRole === "editor") {
    document.getElementById("editor-content").style.display = "block";
  }
}
```

3. Finally, you can style the hidden content sections using CSS to make them initially invisible.

```css
#developer-content,
#editor-content {
  display: none;
}
```

With this setup, when the user selects a role from the dropdown menu, the `updateContent()` function will be called to determine which content section should be shown and which should be hidden.


Here's an extended example that demonstrates how you can further customize the behavior based on the selected role:

```html
<select id="user-role" onchange="updateContent()">
  <option value="developer">Developer</option>
  <option value="editor">Editor</option>
</select>

<div id="developer-content" class="content">
  <h2>Developer Content</h2>
  <p>This content is visible only to developers.</p>
</div>

<div id="editor-content" class="content">
  <h2>Editor Content</h2>
  <p>This content is visible only to editors.</p>
</div>

<script>
function updateContent() {
  var selectedRole = document.getElementById("user-role").value;
  var contentSections = document.getElementsByClassName("content");
 
  // Hide all content sections
  for (var i = 0; i < contentSections.length; i++) {
    contentSections.style.display = "none";
  }
 
  // Show the appropriate content section based on the selected role
  if (selectedRole === "developer") {
    document.getElementById("developer-content").style.display = "block";
  } else if (selectedRole === "editor") {
    document.getElementById("editor-content").style.display = "block";
  }
}
</script>

<style>
.content {
  display: none;
}
</style>
```

In this example, each content section has a unique ID and is assigned the "content" class. The JavaScript function `updateContent()` is modified to hide all elements with the "content" class before showing the appropriate section.

Additionally, the content sections are now styled with headings and paragraphs using HTML tags. The CSS style block is moved below the JavaScript code and sets the initial display property of the content class to "none", making them initially hidden.