Create a function that allows users to toggle and display only one div within a group at a time using

Question

Create a function that allows users to toggle and display only one div within a group at a time using

The following code successfully toggles individual divs, but it displays active divs in a stack when toggling. I am trying to achieve the functionality of "showing only one at a time". Any suggestions?

function toggle_visibility(id) {
  var e = document.getElementById(id);
  if (e.style.display == 'block')
    e.style.display = 'none';
  else
    e.style.display = 'block';
}

<ul class="post-advanced-menu">
  <li><a href="#" onclick="toggle_visibility('source');">Source</a></li>
  <li><a href="#" onclick="toggle_visibility('share');">Share</a></li>
  <li><a href="#" onclick="toggle_visibility('report');">Report</a></li>
</ul>

<div id="post-advanced-content">
   <div id="source" style="display: none;">Source</div>
   <div id="share" style="display: none;">Share</div>
   <div id="report" style="display: none;">Report</div>
</div>

Thank you,

javascript html css toggle

Answer 1

Answer №1

Make sure to hide all other elements before showing the selected one.

function toggle_visibility(id) {
  const target = document.getElementById(id);
  if (!target) return;

  // Hide all other div elements.
  const divs = document.querySelectorAll('.div');
  for (const div of divs) {
    div.style.display = 'none';
  }

  // Show selected one
  target.style.display = 'block';
}

div {
  width: 20px;
  height: 20px;
}

#source {
  background: red;
}

#share {
  background: blue;
}

#report {
  background: green;
}

<ul class="post-advanced-menu">
  <li><a href="#" onclick="toggle_visibility('source');">Source</a></li>
  <li><a href="#" onclick="toggle_visibility('share');">Share</a></li>
  <li><a href="#" onclick="toggle_visibility('report');">Report</a></li>
</ul>

<!-- Source -->
<div id="source" class="div" style="display: none;"></div>

<!-- Share -->
<div id="share" class="div" style="display: none;"></div>

<!-- Report -->
<div id="report" class="div" style="display: none;"></div>

Answer 2

Make sure to hide all other elements before showing the selected one.

function toggle_visibility(id) {
  const target = document.getElementById(id);
  if (!target) return;

  // Hide all other div elements.
  const divs = document.querySelectorAll('.div');
  for (const div of divs) {
    div.style.display = 'none';
  }

  // Show selected one
  target.style.display = 'block';
}

div {
  width: 20px;
  height: 20px;
}

#source {
  background: red;
}

#share {
  background: blue;
}

#report {
  background: green;
}

<ul class="post-advanced-menu">
  <li><a href="#" onclick="toggle_visibility('source');">Source</a></li>
  <li><a href="#" onclick="toggle_visibility('share');">Share</a></li>
  <li><a href="#" onclick="toggle_visibility('report');">Report</a></li>
</ul>

<!-- Source -->
<div id="source" class="div" style="display: none;"></div>

<!-- Share -->
<div id="share" class="div" style="display: none;"></div>

<!-- Report -->
<div id="report" class="div" style="display: none;"></div>

Answer 3

Answer №2

One effective approach I suggest is using unobtrusive script with class and data attributes:

window.addEventListener("load",
  () => document.querySelectorAll(".post-advanced-menu").forEach(
    ele => ele.addEventListener("click",
      e => {
        var tgt = e.target;
        var id = tgt.getAttribute("data-id");
        document.querySelectorAll(".toggle").forEach(
          ele => ele.style.display = ele.id == id ? "block" : "none")
      })
  )
)

.toggle {
  display: none
}

<ul class="post-advanced-menu">
  <li><a href="#" data-id="source">Source</a></li>
  <li><a href="#" data-id="share">Share</a></li>
  <li><a href="#" data-id="report">Report</a></li>
</ul>

<!-- Source -->
<div id="source" class="toggle">Source</div>

<!-- Share -->
<div id="share" class="toggle">Share</div>

<!-- Report -->
<div id="report" class="toggle">Report</div>

Answer 4

One effective approach I suggest is using unobtrusive script with class and data attributes:

window.addEventListener("load",
  () => document.querySelectorAll(".post-advanced-menu").forEach(
    ele => ele.addEventListener("click",
      e => {
        var tgt = e.target;
        var id = tgt.getAttribute("data-id");
        document.querySelectorAll(".toggle").forEach(
          ele => ele.style.display = ele.id == id ? "block" : "none")
      })
  )
)

.toggle {
  display: none
}

<ul class="post-advanced-menu">
  <li><a href="#" data-id="source">Source</a></li>
  <li><a href="#" data-id="share">Share</a></li>
  <li><a href="#" data-id="report">Report</a></li>
</ul>

<!-- Source -->
<div id="source" class="toggle">Source</div>

<!-- Share -->
<div id="share" class="toggle">Share</div>

<!-- Report -->
<div id="report" class="toggle">Report</div>

Answer 5

Answer №3

To ensure a seamless user experience, consider hiding other items before allowing users to click on a specific item.
This approach also involves hiding the clicked item if it is already visible.

For easier management, assign a unique class to each div element, such as class="item".

<ul class="post-advanced-menu">
  <li><a href="#" onclick="toggle_visibility('source');">Source</a></li>
  <li><a href="#" onclick="toggle_visibility('share');">Share</a></li>
  <li><a href="#" onclick="toggle_visibility('report');">Report</a></li>
</ul>

<!-- Source -->
<div id="source" class="item" style="display: none;">1</div>

<!-- Share -->
<div id="share" class="item" style="display: none;">2</div>

<!-- Report -->
<div id="report" class="item" style="display: none;">3</div>

function toggle_visibility(id) {
  var e = document.getElementById(id);
  if (e.style.display == 'block') {
    e.style.display = 'none'
  } else {
    document.querySelectorAll('.item').forEach(function(div) {
       div.style.display = 'none';
    })
    e.style.display = 'block';
  }
}

Answer 6

To ensure a seamless user experience, consider hiding other items before allowing users to click on a specific item.
This approach also involves hiding the clicked item if it is already visible.

For easier management, assign a unique class to each div element, such as class="item".

<ul class="post-advanced-menu">
  <li><a href="#" onclick="toggle_visibility('source');">Source</a></li>
  <li><a href="#" onclick="toggle_visibility('share');">Share</a></li>
  <li><a href="#" onclick="toggle_visibility('report');">Report</a></li>
</ul>

<!-- Source -->
<div id="source" class="item" style="display: none;">1</div>

<!-- Share -->
<div id="share" class="item" style="display: none;">2</div>

<!-- Report -->
<div id="report" class="item" style="display: none;">3</div>

function toggle_visibility(id) {
  var e = document.getElementById(id);
  if (e.style.display == 'block') {
    e.style.display = 'none'
  } else {
    document.querySelectorAll('.item').forEach(function(div) {
       div.style.display = 'none';
    })
    e.style.display = 'block';
  }
}

Create a function that allows users to toggle and display only one div within a group at a time using

Answer №1

Answer №2

Answer №3

Similar questions

Vue fails to detect changes in an Array

What is the quickest and most effective method for toggling more than 10,000 checkboxes using Javascript/jQuery?

Placing an HTML element inside a div using CSS in Vue

Interface key error caused by the TypeScript template literal

Uploading and updating your YouTube channel banner is made easy with the help of the Node.js Googleapis client

Issue with Material-UI: Inability to Activate the onChangeCommitted Event while Testing

Having issues with JQuery.Ajax() function, not entirely certain if the script is loading correctly

Ways to add elements to an array nested within services and append to an object within another object

Updating the names of keys within an object that includes nested child objects

Sort out the DIVs containing card elements

Pressing the different buttons on a form does not result in the form being submitted

Make sure to wait for the complete loading of all content in the AJAX response before showing it on

Create a stylish accordion in asp.net with custom arrow buttons using CSS

Tips for Moving an h1 Tag to the Beginning of a Div

Updating the CSS class for a particular text segment enclosed in a <p> or <span> element

Problems arise when attempting to load a JSON file using the d3 library installed through npm

By stopping clearInterval, the setInterval operation becomes solely dependent on time

What is the best way to center text in the middle of a button?

Adjust the burger menu color based on the background color of the section

Tips for displaying a refresh indicator while making an ajax call for refreshing data: