Show ID onclick JS

Question

Hi sorry in advance if this has already been asked but I can't find the answer.

I have a set of links that trigger certain ids to show onclick, it works but the one link is suppose to trigger 2 ids to show. My javascript knowledge is not great. Thanks for any help.

Here is my codepen https://codepen.io/louise-fourie/pen/abVdwyZ

      
<li>
        <a href="#!"  class="article-btn" onclick="show('el-57d5b6f71db32029');">Fitness & Wellness</a>
      </li>
      <li>
        <a href="#!"  class="article-btn"  onclick="show('el-57d5b6f71db32029');show('el-e881a23a64890108');">Business</a>
      </li>
      
      <li>
        <a href="#!"  class="article-btn" onclick="show('el-65ebd7b2380005a1');">Arts & Entertainment</a>
      </li>
    </ul>

<div class="articles">
  <div id="el-57d5b6f71db32029">fitness</div>
   <div  id="el-e881a23a64890108">business</div>
  <div  id="el-65ebd7b2380005a1">art</div>
</div>

<script>
var divs = ["el-57d5b6f71db32029", "el-e881a23a64890108", "el-65ebd7b2380005a1"];

        var visibleId = null;
        function show(id) {
           for(i = 0; i < divs.length; i++) {
          if(visibleId !== id) {
            
            visibleId = id;
          
          }
           }
          hide();
        }
        function hide() {
          var div, i, id;
          for(i = 0; i < divs.length; i++) {
            id = divs[i];
            div = document.getElementById(id);
            if(visibleId === id) {
              div.style.display = "block";
            } else {
              div.style.display = "none";
            }
          }
        }
</script>

Answer 1

Your function seems to be running, but every time you receive an ID in your function, you hide everything else with the "hide" function, so in the end, the last ID sent, is the only one that will show, try this:

Call the function once, but pass the IDs as one string separated by commas

<a href="#!"  class="article-btn"  onclick="show('el-57d5b6f71db32029,el-e881a23a64890108')">Business</a>

Then change your "show" function like this:

    function show(ids) {
      let idArr = ids.split(",");
      divs.forEach( x => {
                   div = document.getElementById(x);
                   div.style.display = (idArr.includes(x) ? "block" : "none");
      });
    }
    

What this does, is that it will create an array of IDs based on the parameter you send, and for each item it will check if the ID was sent and show/hide it.

Please let me know if this helps or if you need more details.

EDIT: Formatting in the JavaScript code and simplifying it. Please also note that here I am not validating if the an element with the ID exists, it is only to show you how it can work. It will need additional validations

Answer 2

You can try it

<ul>    
<li>
        <a href="#!"  class="article-btn" data-id="el-57d5b6f71db32029">Fitness & Wellness</a>
      </li>
      <li>
        <a href="#!"  class="article-btn"  data-id="el-57d5b6f71db32029;el-e881a23a64890108">Business</a>
      </li>
      
      <li>
        <a href="#!"  class="article-btn" data-id="el-65ebd7b2380005a1">Arts & Entertainment</a>
      </li>
    </ul>

<div class="articles">
  <div id="el-57d5b6f71db32029" style="display:none;">fitness</div>
   <div id="el-e881a23a64890108" style="display:none;">business</div>
  <div id="el-65ebd7b2380005a1" style="display:none;">art</div>
</div>

<script>
document.querySelectorAll('.article-btn').forEach(item => {
  item.addEventListener('click', event => {
    show((item.getAttribute('data-id')).split(";"));
  })
})

const show = (id) => {
    document.querySelectorAll('.articles>div').forEach(item => {
      if(id.includes(item.getAttribute('id'))){
           item.style["display"] = "block";
      }else{
           item.style["display"] = "none";                    
      } 
    });
}     
</script>

Answer 3

Inline JavaScript is generally discouraged these days, so here's a solution that removes that dependency. It puts the ids of the list items into the dataset instead. You can then create an array from that dataset, iterate over the articles, and if the id is included in the array of ids either hide or show it.

// Cache the list and the articles
const ul = document.querySelector('ul');
const articles = document.querySelectorAll('.articles div');

// Add an event listener to the list
ul.addEventListener('click', handleClick, false);

function handleClick(e) {

  // Get the node name and the dataset
  // from the element that was clicked
  const { nodeName, dataset } = e.target;

  // Check that it was an anchor
  if (nodeName === 'A') {
    
    // Get an array of ids from the dataset
    const ids = dataset
      .ids.split(',')
      .map(id => id.trim());
    
    // Hide all the articles
    articles.forEach(article => {
      article.classList.add('hide');
    });
    
    // Show the articles where the id is in
    // the list of ids
    articles.forEach(div => {
      if (ids.includes(div.id)) {
        div.classList.remove('hide');
      }
    });
  
  }

}

.hide { display: none; }
ul li:hover { cursor: pointer; color: red; }

<ul>
  <li>
    <a data-ids="el-57d5b6f71db32029">Fitness & Wellness</a>
  </li>
  <li>
    <a data-ids="el-57d5b6f71db32029, el-e881a23a64890108">Business</a>
  </li>
  <li>
    <a data-ids= "el-65ebd7b2380005a1">Arts & Entertainment</a>
  </li>
</ul>

<div class="articles">
  <div id="el-57d5b6f71db32029" class="hide">fitness</div>
  <div id="el-e881a23a64890108" class="hide">business</div>
  <div id="el-65ebd7b2380005a1" class="hide">art</div>
</div>