Показать/скрыть по одному элементу за раз

// Show/hide filter content
var show = function (elem) {
    // Hide all others first
    document.querySelectorAll('.content').forEach(hide);

    elem.classList.add('is-visible');
};

// Hide an element
var hide = function (elem) {
    elem.classList.remove('is-visible');
};

// Toggle element visibility
var toggle = function (elem) {

    // If the element is visible, hide it
    if (elem.classList.contains('is-visible')) {
        hide(elem);
        return;
    }

    // Otherwise, show it
    show(elem);
};

// Listen for click events
document.addEventListener('click', function (event) {

    // Make sure clicked element is our toggle
    if (!event.target.classList.contains('btn')) return;

    // Prevent default link behavior
    event.preventDefault();

    // Get the selected content
    var content = document.querySelector(event.target.hash);
    if (!content) return;

    // Toggle the content
    toggle(content);

}, false);

.content {
    display: none;
    opacity: 0;
    transition: opacity .15s linear;
}

.content.is-visible {
    display: block;
    opacity: 1;
}

<a class = "btn" id = "btn-one" href = "#one">Button one</a>
<a class = "btn" id = "btn-two" href = "#two">Button two</a>
<div class = "content" id = "one">Content one</div>
<div class = "content" id = "two">Content two</div>

// Show/hide filter content
function show(elem) {
    hideAllElements()
    
    elem.classList.add('is-visible');
};

// Hide an element
function hide (elem) {
    elem.classList.remove('is-visible');
};

// Hide all elements
function hideAllElements (elem) {
    const visibleElements = document.querySelectorAll('.is-visible');
    for (const element of visibleElements) {
        element.classList.remove('is-visible');
    }
};

// Toggle element visibility
function toggle (elem) {

    // If the element is visible, hide it
    if (elem.classList.contains('is-visible')) {
        hide(elem);
        return;
    }

    // Otherwise, show it
    show(elem);
};

// Listen for click events
document.addEventListener('click', function (event) {
    
    // Make sure clicked element is our toggle
    if (!event.target.classList.contains('btn')) return;

    // Prevent default link behavior
    event.preventDefault();

    // Get the selected content
    const content = document.querySelector(event.target.hash);
    if (!content) return;

    // Toggle the content
    toggle(content);

}, false);

.content {
    display: none;
    opacity: 0;
    transition: opacity .15s linear;
}

.content.is-visible {
    display: block;
    opacity: 1;
}

<a class = "btn" id = "btn-one" href = "#one">Button one</a>
<a class = "btn" id = "btn-two" href = "#two">Button two</a>
<div class = "content" id = "one">Content one</div>
<div class = "content" id = "two">Content two</div>

document.body.addEventListener('click', e =>
  {
  if (!e.target.matches('.btn')) return;
  
  if ( document.body.className === e.target.id )
    document.body.className = '';
  else  
    document.body.className = e.target.id;
  })

.content {
  display: none;
  opacity: 0;
  transition: opacity .15s linear;
}

body.btn-one #one.content ,
body.btn-two #two.content { 
  display: block;
  opacity: 1;
  }

<a class = "btn" id = "btn-one" href = "#">Button one</a>
<a class = "btn" id = "btn-two" href = "#">Button two</a>
<div class = "content" id = "one">Content one</div>
<div class = "content" id = "two">Content two</div>

section {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

section label {
  order: 1;
  display: inline-block;
  align-self: start;
}

section label:has(input:checked) {
  background: PowderBlue;
}

section label:has(input:checked)+div {
  display: block;
}

section input {
  display: none;
}

section div {
  order: 2;
  display: none;
  width: 100%;
  border: solid black thin;
  min-height: 5em;
}

<section>
  <label><input type = "radio" name = "tab" checked>Button one</label>
  <div class = "content">Content one</div>
  <label><input type = "radio" name = "tab">Button two</label>
  <div class = "content">Content two</div>
</section>