Hiding the divs (depending on the pressed button)

user_2812237 0
Viewed 56

this is a problem that I keep coming across in my beginnings of the JS development. The problem outline is the following. We have N number of buttons on the page. We want to create an event listener for each of these buttons. Suppose the buttons' names are: "overview-tab", "return-tab" and "analysis-tab". We also have div with class names that correspond to the button names. For example, <div class="overview-tab"></div>. Initially, only one div is visible. Suppose it is the overview-tab. The goal is to display: none all of the divs, but the one that the user clicked the button on. I always start with the following, but then realise that inside of the second each, I do not have access to the name of the button from the above each:

  $(":button").each(function(index, buttonElement) {
      $(element).on('click', function(err) {
        if(err) throw err;

        $(".tabs").each(function(index, tabElement) {
//            set all of the tabs, but the one clicked on (buttonElement)
//            to display: none.
        });
      });
  });

HTML code:

<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
   <input type="button" name="overview-tab" value="Overview Tab">
   <input type="button" name="return-tab" value="Return Tab">
   <input type="button" name="analysis-tab" value="Analysis Tab">

   <div class="overview-tab" style="background:red; width: 10px; height: 10px;"></div>
   <div class="return-tab" style="display: none; background: green; width: 10px; height: 10px;"></div>
   <div class="analysis-tab" style="display: none; background: yellow; width: 10px; height: 10px;"></div>
</body>

</html>
html jquery javascript
5 Answers

You don't need to iterate all buttons and then bind click event. you can simply add click event handler and show relevant tab and hide others. You can try below code -

NOTE:: I have added tab class to divs related to tabs so that other div which are not tab related will not affect. I would suggest if you can put one wrapper div around tab divs which will give you better control.

$(function(){
  $("input:button").on("click", function(){
     var name = $(this).attr("name");
     var $tabToShow = $("div.tab." + name);
     $tabToShow.show();
     $("div.tab").not($tabToShow).hide();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="button" name="overview-tab" value="Overview">
   <input type="button" name="return-tab" value="Return">
   <input type="button" name="analysis-tab" value="Analysis">

   <div class="overview-tab tab" style="background:red; width: 10px; height: 10px;">OverView Tab</div>
   <div class="return-tab tab" style="display: none; background: green; width: 10px; height: 10px;">Return Tab</div>
   <div class="analysis-tab tab" style="display: none; background: yellow; width: 10px; height: 10px;">Analysis Tab</div>

user_6495040

1.You can use name attribute of buttons to compare it with div class

2.Based on comparison show corresponding div and hide all other divs

$(document).on('click', ":button",function() {
    var name = $(this).attr('name');
    if(name !==''){
        $('div').hide();
        $('div[class='+ name +']').show();
    }
});

Working snippet:-

$(document).on('click', ":button",function() {
  var name = $(this).attr('name');
  if(name !==''){
    $('div').hide();
    $('div[class='+ name +']').show();
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>

<body>
   <input type="button" name="overview-tab" value="Overview">
   <input type="button" name="return-tab" value="Return">
   <input type="button" name="analysis-tab" value="Analysis">

   <div class="overview-tab" style="background:red; width: 10px; height: 10px;"></div>
   <div class="return-tab" style="display: none; background: green; width: 10px; height: 10px;"></div>
   <div class="analysis-tab" style="display: none; background: yellow; width: 10px; height: 10px;"></div>
</body>

</html>

user_42483280

Simple java script code 

$('.tab').hide(); //hide all tab initailly
function changeTab(tabClicked)
{
console.log("------->"+tabClicked);

    $('.tab').hide();  //hide all the tab  
    $(tabClicked).show();  

}

create unique id for each div.eg:-

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="nav navbar-nav" id="menubar">

  <li>
  <input type="button" value="show foo" onclick="changeTab('#foo')">
  </li>

 <li>
  <input type="button" value="show boo" onclick="changeTab('#boo')">
  </li>


</ul>

<div id="foo" class="tab">
foo11

</div>

<div id="boo" class="tab">
boo
</div>
user_57396750

In jquery you don't need to use each() on elements to set an event, so what you might want if i understood well :

$('[type="button"]').on('click',function(){
  $('.overview-tab, .return-tab, .analysis-tab').hide()
  $('.' + $(this).attr('name')).show();
});

And if you want just to display one div at the start you just need to add before the code above :

$('.return-tab, .analysis-tab').hide()
user_89958170

Adding to @Bhushan Kawadkar, You can use siblings() in jquery

something like this:

$(function(){
   $("input:button").on("click", function(){
   var name = $(this).attr("name");
   var $tabToShow = $("div.tab." + name);
   $tabToShow.show().siblings("div.tab").hide();
   });
});

siblings("div.tab") will select any sibling of the active tab that is a div and has .tab class. by this we ensure that <input type="button"> will not hide too(as <input type="button"> is a sibling of the active tab).

user_63549480
Related