title: Creating a Jquery function to work with multiple buttons that work with multiple boxes
body: <p>Ok, so I've been having fun coding for awhile now. I'm still pretty new but am working on what I know. I have come across this road block where I am trying to figure out how to get jquery to allow me to the same function for multiple buttons and each button reacts with a different box. Basically one button will make sure all boxes are closed ".hide()" and then open the specific one. as of right now I cannot get the specific button when clicked to react with the specific box.</p>
  
  <p>Jquery</p>
  
  <pre><code>$(document).ready(function(){
  $("#hide1").click(function(){
  if ($("#box1").css('display') == "none"){
      $(".box").hide();
      $(".bttn").css("opacity", ".5");
      $("#box1").fadeToggle();
      $("#hide1").css("opacity", "1");}
  else
  {
  $("#box1").fadeToggle();
  $("#hide1").css("opacity", ".5");
  }   
  });
  });
  
  $(document).ready(function(){
  $("#hide2").click(function(){
  if ($("#box2").css('display') == "none"){
      $(".box").hide();
      $(".bttn").css("opacity", ".5");
      $("#box2").fadeToggle();
      $("#hide2").css("opacity", "1");}
          else
  {
  $("#box2").fadeToggle();
  $("#hide2").css("opacity", ".5");
  }
  });
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li style="opacity:.5;" id="hide1" class="bttn"&gt;&lt;/li&gt;
  &lt;li style="opacity:.5;" id="hide2" class="bttn"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;div style="display:none;" id="box1" class="box"&gt;
  &lt;div style="display:none;" id="box2" class="box"&gt;
  </code></pre>
  
  <p>as of right now this set up works. But I was wondering if there was a way to condense the jquery into one function so that clicking on either button (li) would allow it to work with it's respective division.</p>
  
  <p><a href="https://jsfiddle.net/nathanahartmann/5h3r1671/" rel="nofollow">https://jsfiddle.net/nathanahartmann/5h3r1671/</a></p>