title: Why is a section of my webpage disappearing when an icon is clicked in a specific manner?
body: <p>There is a bug in my code ; in the third section of the website there are 6 boxes. When the page is first loaded and if the user clicks on the six box then clicks the left arrow, the third section goes completely white. </p>
  
  <p>This only happens if the sixth box is the first to be clicked after the page loads. If you, say, click on the third box and keep clicking right than clicking left from the six box then it works fine.</p>
  
  <p>Please try it for yourself to fully understand the issue; click on the box with the text ''Facebook Networking'' then click on the left arrow and you will see the third section completely white out.</p>
  
  <p><a href="https://codepen.io/JoyFulCoding/pen/EzXowL" rel="nofollow noreferrer">https://codepen.io/JoyFulCoding/pen/EzXowL</a></p>
  
  <p>I need another pair of eyes to spot what is causing this bug. I initially suspected it was something to do with my use of jQuery so I took the long task of rewriting it from scratch to see if I can replicate the same code. I was able to replicate the same code and unfortunately the bug still persists. </p>
  
  <pre><code>$(document).ready(function() {
  
    $("#menu").on('click', function() {
      $("#icon").toggleClass("fa-times white-icon");
    });
  
    $("#fbAdCampaigns").on('click', function(){
      $("#boxes-container").toggle();
      $("#reveal1").toggle().css("background-color" ,"#FF2C42");
    });
  
    $("#close1").on("click", function() {
      $("#boxes-container").toggle();
      $("#reveal1").toggle();
    })
  
    $("#arrowR1").on("click",function(){
      $("#reveal1").toggle();
      $("#reveal2").toggle();
    })
  
    $("#fbPageDesign").on('click', function(){
      $("#boxes-container").toggle();
      $("#reveal2").toggle().css("background-color" ,"#4C27B3");
    });
  
    $("#close2").on("click", function() {
      $("#boxes-container").toggle();
      $("#reveal2").toggle();
    })
  
    $("#arrowR2").on("click", function() {
      $("#reveal2").toggle();
      $("#reveal3").toggle().css("background-color" , "#00E3B5");
    })
  
    $("#arrowL2").on("click", function() {
      $("#reveal2").toggle();
      $("#reveal1").toggle();
    })
  
    $("#fbManagement").on('click', function(){
      $("#boxes-container").toggle();
      $("#reveal3").toggle().css("background-color" ,"#00E3B5");
    });
  
     $("#close3").on("click", function() {
      $("#boxes-container").toggle();
      $("#reveal3").toggle();
    })
  
    $("#arrowR3").on("click",function() {
      $("#reveal3").toggle();
      $("#reveal4").toggle().css("background-color" , "#00E3B5" );
    })
  
    $("#arrowL3").on("click", function() {
      $("#reveal3").toggle();
      $("#reveal2").toggle();
    })
  
    $("#fbOutreach").on('click', function(){
      $("#boxes-container").toggle();
      $("#reveal4").toggle().css("background-color" ,"#00E3B5");
    });
  
     $("#close4").on("click", function() {
      $("#boxes-container").toggle();
      $("#reveal4").toggle();
    })
  
    $("#arrowR4").on("click",function() {
      $("#reveal4").toggle();
      $("#reveal5").toggle().css("background-color", "#FF2C42")
    })
  
    $("#arrowL4").on("click",function() {
      $("#reveal4").toggle();
      $("#reveal3").toggle().css("background-color", "#00E3B5")
    })
  
      $("#fbCompetitionApps").on('click', function(){
      $("#boxes-container").toggle();
      $("#reveal5").toggle().css("background-color" ,"#FF2C42");
    });
  
     $("#close5").on("click", function() {
      $("#boxes-container").toggle();
      $("#reveal5").toggle();
    })
  
    $("#arrowR5").on("click",function() {
      $("#reveal5").toggle();
      $("#reveal6").toggle().css("background-color", "#4C27B3")
    })
  
      $("#arrowL5").on("click",function() {
      $("#reveal5").toggle();
      $("#reveal4").toggle().css("background-color", "#00E3B5")
    })
  
    $("#fbNetworking").on('click', function(){
      $("#boxes-container").toggle();
      $("#reveal6").toggle().css("background-color" ,"#4C27B3");
    });
  
     $("#close6").on("click", function() {
      $("#boxes-container").toggle();
      $("#reveal6").toggle();
    })
  
    $("#arrowL6").on("click", function() {
      $("#reveal6").toggle();
      $("#reveal5").toggle();
    })
  
  
  
  });
  </code></pre>
  
  <p>See the rest of my code here:</p>
  
  <p><a href="https://codepen.io/JoyFulCoding/pen/EzXowL" rel="nofollow noreferrer">https://codepen.io/JoyFulCoding/pen/EzXowL</a></p>
  
  <p>Any help would be greatly appreciated.</p>