Page content disappears when .slideToggle has been used to close div.

Page content disappears when .slideToggle has been used to close div.

Hey jQuery forums,

I had a problem what occurs only on Android phones using the Chrome browser.

Info:
jQuery version: 2.1.3.


I have a 2 divs that are below eachother you click the top one and the lower one closes:
  2. <div id='homeExtenter'>
  3.             
  4.             <div class='menuItem'>
  5.                 <div class="menuHeader">Menu Header</div>
  6.                 <div class='menuItems'>
  7.                     <ul>
  8.                         <a><li>Item 1</li></a>
  9.                         <a><li>Item 2</li></a>
  10.                         <a><li>Item 3</li></a>
  11.                         <a><li>Item 4</li></a>
  12.                         <a><li>Item 5</li></a>
  13.                     </ul>
  14.                 </div>
  15.             </div>
  16.             
  17.             <div class='menuItem'>
  18.                 <div class="menuHeader">Menu Header</div>
  19.                 <div class='menuItems'>
  20.                     <ul>
  21.                         <a><li>Item 1</li></a>
  22.                         <a><li>Item 2</li></a>
  23.                         <a><li>Item 3</li></a>
  24.                         <a><li>Item 4</li></a>
  25.                         <a><li>Item 5</li></a>
  26.                     </ul>
  27.                 </div>
  28.             </div>
  29.             
  30.             <div class='menuItem'>
  31.                 <div class="menuHeader">Menu Header</div>
  32.                 <div class='menuItems'>
  33.                     <ul>
  34.                         <a><li>Item 1</li></a>
  35.                         <a><li>Item 2</li></a>
  36.                         <a><li>Item 3</li></a>
  37.                         <a><li>Item 4</li></a>
  38.                         <a><li>Item 5</li></a>
  39.                     </ul>
  40.                 </div>
  41.             </div>
  42.             
  43.             <div class='menuItem'>
  44.                 <div class="menuHeader">Menu Header</div>
  45.                 <div class='menuItems'>
  46.                     <ul>
  47.                         <a><li>Item 1</li></a>
  48.                         <a><li>Item 2</li></a>
  49.                         <a><li>Item 3</li></a>
  50.                         <a><li>Item 4</li></a>
  51.                         <a><li>Item 5</li></a>
  52.                     </ul>
  53.                 </div>
  54.             </div>
  55.             
  56.             
  57.         </div>
The menuItems is being toggled and then that one is the last one to close again (So when no other MenuItems is open) the page disappears. And because it occurs on phone only running android. I can't see the source of the page. On a android tablet running version 4.2 its working, also on Apple phones and on the desktop. 

here is the code I use to toggle the MenuItems div

  2. $(".menuHeader").on('click', function(){
  3.         $(this).parent().children('.menuItems').slideToggle();
  4.     });

Here is also the CSS of the page

  2. #homeExtenter{
  3.     width: 100%;
  4.     height: auto;
  5. }

  7. #homeExtenter .menuItem{
  8.     width: 80%;
  9.     background-color: #A1D818;
  10.     margin-bottom: 20px;
  11. }

  13. #homeExtenter .menuItems{
  14.     display: none;
  15.     background-color: rgba(0, 0, 0, 0.3);
  16. }

  18. #homeExtenter .menuHeader{
  19.     padding: 10px 0px;
  20. }

  22. #homeExtenter .menuItems li{
  23.     list-style: none;
  24.     padding: 10px 0px;
  25. }

If there is more info needed I'm happy to provide it.