title: When div is toggled, already toggled divs untoggle
body: <p>I'm stuck with some code and I'm not clear as to how to go about making it function without writing a massive amount of code.
  The idea is that when one div is toggled to display a hidden text, when you click on another div, that one un-toggles and only shows the other one.
  I know how to do it manually (using a boat load of code) but I was wondering if there is maybe a "general" line of code I can just paste behind each it.</p>
  
  <p>Here's my JS:</p>
  
  <pre><code>        $(document).ready(function(){
      $('#bioInfo').on('click', function(){
      $('#bioInfoText').toggle();
    });
       $('#bioTech').on('click', function(){
      $('#bioInfoText').toggle();
    });
      $('#bioFuture').on('click', function(){
      $('#bioFutureText').toggle();
    });
      $('#bioCont').on('click', function(){
      $('#bioContText').toggle();
    });
      $('#bioAdd').on('click', function(){
      $('#bioAddText').toggle();
    });
      $('#bioPrac').on('click', function(){
      $('#bioPracText').toggle();
    });
       $('#automInfo').on('click', function(){
      $('#automInfoText').toggle();
    });
      $('#automFuture').on('click', function(){
      $('#automFutureText').toggle();
    });
       $('#autom').on('click', function(){
      $('#automInfoText').toggle();
    });
      $('#automContent').on('click', function(){
      $('#automContentText').toggle();
    });
      $('#automAdd').on('click', function(){
      $('#automAddText').toggle();
    });
      $('#automPrac').on('click', function(){
      $('#automPracText').toggle();
    });
       $('#itInfo').on('click', function(){
      $('#itInfoText').toggle();
    });
       $('#it').on('click', function(){
      $('#itInfoText').toggle();
    });
      $('#itFuture').on('click', function(){
      $('#itFutureText').toggle();
    });
      $('#itCont').on('click', function(){
      $('#itContText').toggle();
    });
      $('#itAdd').on('click', function(){
      $('#itAddText').toggle();
    });
      $('#itPrac').on('click', function(){
      $('#itPracText').toggle();
    });
  </code></pre>
  
  <p>As you can see it toggles one by one, but only toggles off if I click on that individual div manually, this is not desired.</p>