title: Toggle hide/show between two divs jQuery
body: <p>I'm trying to get a link working that will toggle hide/show between two divs. Nothing strange and I've seen a lot of examples where this has been done.
  My basic html structure is as follows:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
     &lt;div id="tog_A"&gt;
     &lt;div id="tog_B"&gt;
  &lt;/div&gt;
  
  &lt;a href="#" id="link"&gt;Toggle&lt;/a&gt;
  </code></pre>
  
  <p>And CSS:</p>
  
  <pre><code>#tog_A {
    display:block;
  }
  #tog_A {
    display:block;
  }
  </code></pre>
  
  <p>However, when I add the different solutions that I have found there seems to be a conflict with some other JavaScript code my site uses.
  I'm a real n00b when it comes to JavaScript so perhaps someone can point me in the right direction and maybe help me combine my existing code with the new.</p>
  
  <p>Existing JavaScrip that seems to be in conflict:</p>
  
  <pre><code>//Load when dom ready
  jQuery(function() {
  // click listener for anchors
  jQuery(document).on("click",'a[href^="#"]', function(e) {
  
  // prevent click and side effects 
      e.preventDefault();
  
  // do the scroll
    jQuery('body, html').animate({
      scrollTop : jQuery(this.hash).offset().top
    });
  
  //change state of button
  var oldHash = jQuery(this.hash).attr("id").split("-");
  var oldNr = parseInt(oldHash[1],10);
  var nrOfAllSections = jQuery('[id^="section-"]').length;
  var nr = oldNr == nrOfAllSections ? 1 : oldNr+1;
  if(oldNr == nrOfAllSections) {
    jQuery(this).text("Top ▴");
      } else {
    jQuery(this).text("Down ▾");
      }
  var newHash = "#"+oldHash[0]+"-"+ nr;
  jQuery(this).attr("href", newHash);
  });
  
  jQuery(document).on('click', "#scrollToInfo", function(e) {
     e.preventDefault();
     var nrOfAllSections = jQuery('[id^="section-"]').length;
     var hrefHash = "#section-" + nrOfAllSections;
     var ypos = jQuery(hrefHash).offset().top;
     window.scrollTo(0, ypos);
     jQuery('a#scrollToBottom').text("Top ▴").attr("href", "#section-1");
   });
  
  });
  </code></pre>