Buttons to show or hide divs using single method

Question

I have the following snippets: My HTML Page which uses 4 buttons to show/hide four divs, each will have their own content.

var otherDivs = ["addCustomer", "searchCustomer", "addItem", "searchItem"];

function show(target) {

  var index = otherDivs.indexOf(target);
  for (i = 0; i < otherDivs.length; i++) {
    if (i != index) {
      $(document.getElementById(otherDivs[i].toString())).hide();
    } else {
      $(document.getElementById(otherDivs[i].toString())).show();
    }
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
  <div class="row" name="tabs">
    <button class="redButton" onclick="show('addCustomer')">Add Customer</button>
    <button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
    <button class="redButton" onclick="show('addItem')">Add Item</button>
    <button class="redButton" onclick="show('searchItem')">Search Item</button>
  </div>
  <div class="row trigger" name="searchCustomer" id="searchCustomer">
    ...
  </div>
  <div class="row trigger" name="addCustomer" id="addCustomer">
    ...
  </div>
  <div class="row trigger" name="addItem" id="addItem">
    ...
  </div>
  <div class="row trigger" name="searchItem" id="searchItem">
    ...
  </div>

</div>

The problem is, only the fist button and div (addCustomer) works correctly. I have tried split methods but I would prefer to keep the single method. Any help is appreciated.

Answer 1

Updated answer

    function show(target) {

    $("#Display").html( $('#' + target).html());
      
      
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <div class="container-fluid" style="padding-top: 10px;">
      <div class="row" name="tabs">
        <button class="redButton" onclick="show('addCustomer')">Add Customer</button>
        <button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
        <button class="redButton" onclick="show('addItem')">Add Item</button>
        <button class="redButton" onclick="show('searchItem')">Search Item</button>
      </div>
      <div class="row trigger" name="searchCustomer" id="searchCustomer" hidden>
        Searching Customers
      </div>
      <div class="row trigger" name="addCustomer" id="addCustomer" hidden>
        Customers added
      </div>
      <div class="row trigger" name="addItem" id="addItem" hidden>
        Items added
      </div>
      <div class="row trigger" name="searchItem" id="searchItem" hidden>
         Searching Items
      </div>
<div id="Display">
</div>
    </div>

Answer 2

Use jQuery fully when you have it.

Although with your HTML and inline script this would work:

function show(target) {
  $('.trigger').hide();
  $("#"+ target).show();
}

As could this (but it would not work as a radio button more like a checkbox):

function show(target) {
  $("#"+ target).toggle();
}

I strongly suggest you use unobtrusive code and move the script out of the HTML

$(function() {
  $(".redButton").on("click",function() { // any button
    $(".trigger").hide(); // hide the divs
    $("#"+$(this).data("id")).show(); // show the relevant div
  });
});

.trigger { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
  <div class="row" name="tabs">
    <button type="button" class="redButton" data-id="addCustomer">Add Customer</button>
    <button type="button" class="redButton" data-id="searchCustomer">Search Customers</button>
    <button type="button" class="redButton" data-id="addItem">Add Item</button>
    <button type="button" class="redButton" data-id="searchItem">Search Item</button>
  </div>
  <div class="row trigger" name="searchCustomer" id="searchCustomer">
    Search Customer
  </div>
  <div class="row trigger" name="addCustomer" id="addCustomer">
    Add Customer
  </div>
  <div class="row trigger" name="addItem" id="addItem">
    Add Item
  </div>
  <div class="row trigger" name="searchItem" id="searchItem">
    Search Item
  </div>

</div>

Answer 3

Simpy use the JQuery toggle function like so

function show(target) {
  $('#'+target).toggle();
}

You could replace your entire JS in the snippet to just these LOC. HTML remains the same.

function show(target) {
  $('#'+target).toggle();
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
  <div class="row" name="tabs">
    <button class="redButton" onclick="show('addCustomer')">Add Customer</button>
    <button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
    <button class="redButton" onclick="show('addItem')">Add Item</button>
    <button class="redButton" onclick="show('searchItem')">Search Item</button>
  </div>
  <div class="row trigger" name="searchCustomer" id="searchCustomer">
    ...
  </div>
  <div class="row trigger" name="addCustomer" id="addCustomer">
    ...
  </div>
  <div class="row trigger" name="addItem" id="addItem">
    ...
  </div>
  <div class="row trigger" name="searchItem" id="searchItem">
    ...
  </div>

</div>

Answer 4

Actually your code working properly but the thing is that you cannot specfiy which div is opened now because all divs have the same content, so when you add numbers or a different content you can know which one is opened now

var otherDivs = ["addCustomer", "searchCustomer", "addItem", "searchItem"];

function show(target) {

  var index = otherDivs.indexOf(target);
  for (i = 0; i < otherDivs.length; i++) {
    if (i != index) {
      $(document.getElementById(otherDivs[i].toString())).hide();
    } else {
      $(document.getElementById(otherDivs[i].toString())).show();
    }
  }

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid" style="padding-top: 10px;">
  <div class="row" name="tabs">
    <button class="redButton" onclick="show('addCustomer')">Add Customer</button>
    <button class="redButton" onclick="show('searchCustomer')">Search Customers</button>
    <button class="redButton" onclick="show('addItem')">Add Item</button>
    <button class="redButton" onclick="show('searchItem')">Search Item</button>
  </div>
  <div class="row trigger" name="searchCustomer" id="searchCustomer">
    .11..
  </div>
  <div class="row trigger" name="addCustomer" id="addCustomer">
    .22..
  </div>
  <div class="row trigger" name="addItem" id="addItem">
    .33..
  </div>
  <div class="row trigger" name="searchItem" id="searchItem">
    .44..
  </div>

</div>