JSFiddle - React, Tailwind, and code Playground

by Alexandre Simoes

HTML

<input id="flipBusinessArea" type="button" value="Business" />
<input id="flipHowCanWe" type="button" value="How Can We" />

<div id="BusinessArea" class="pageRightToggler">
  <h3 class="txtBlack">Business Areas We Serve</h3>
  <p>We can, and do provide services to a large portion of the business, providing a service that add's value to every task or project we are asked to help with.</p>
  <p>Some areas we support include;</p>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
  </ul>
</div>

<div id="HowCanWe" class="pageRightToggler">
  <h3 class="txtBlack">How Can We</h3>
  <p>We can, and do provide services to a large portion of the business, providing a service that add's value to every task or project we are asked to help with.</p>
  <p>Some areas we support include;</p>
  <ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
  </ul>
</div>

CSS

#DataUpload,
#ReportsPreview,
#ChangeRequest,
#BusinessArea,
#HowCanWe,
#ContactUs,
#flip,
#flipReportsPreview {
  padding: 10px;
}

#DataUpload,
#ReportsPreview,
#ChangeRequest,
#BusinessArea,
#HowCanWe,
#ContactUs {
  width: 90%;
  display: none;
  border: solid;
  /*padding: 10px;*/
  color: #000000;
  border-color: #6D7B8D;
  border-width: 1px;
  border-radius: 5px;
  background-color: #98AFC7;
}

JavaScript

$(document).ready(function() {
  $("#flipBusinessArea").click(function() {
  	var $elem = $("#BusinessArea");
    $elem.slideToggle("fast", function(){ $elem.goto(); });
  });

  $("#flipHowCanWe").click(function() {
  	var $elem = $("#HowCanWe");
    $elem.slideToggle("fast", function(){ $elem.goTo(); });
  });
});



(function($) {
  $.fn.goTo = function() {
    $('html, body').animate({
      scrollTop: $(this).offset().top + 'px'
    }, 'fast');
    return this; // for chaining...
  }
})(jQuery);