jquery - 向きにタブ付きコンテンツが表示されない

Question

jQuery スライダー - flexslider (これはモバイル サイトです) を表示する 2 つのタブがあります。縦向きモードでは 2 つの画像 (つまり 2 div) があり、横向きモードでは 3 つの画像 (つまり 3 div) があります。それらは異なるコンテナ コードに保持され、向きに基づいて表示されるものは CSS によって制御されます。問題は、デバイスが向きを取得すると最初のタブが正常に表示されることですが、他のタブに切り替えるとコンテンツが表示されません。通常のデスクトップ ブラウザーでこれをテストすると、ウィンドウのサイズがわずかに変更されるとすぐに表示されます。一言で言えばコードは次のとおりです。

HTML:

    <!--tabs-->
    <div id="toggleLeft" class="active toggleBox"><a href="" >New Promotions</a></div>
    <div id="toggleRight" class="toggleBox"><a href="">Ending soon</a></div>

    <!--containers-->

    <div id="toggleBoxLeft">
      <div id="mainPortrait" role="main">SLIDER CODE FOR PORTRAIT VIEW</div>
      <div id="mainLandscape" role="main">SLIDER CODE FOR LANDSCAPE VIEW</div>
    </div>

    <div id="toggleBoxRight">
      <div id="mainPortrait2" role="main">SLIDER CODE FOR PORTRAIT VIEW</div>
      <div id="mainLandscape2" role="main">SLIDER CODE FOR LANDSCAPE VIEW</div>
    </div>

    CSS:

    @media all and (orientation:landscape){

    #mainPortrait           {
        margin-left: 0px; 
        margin-top: 0px;
        overflow: hidden;
        visibility:hidden;
    }

    #mainLandscape          {
        margin-left: 0px; 
        margin-top: 0px;
        overflow: hidden;
        visibility:visible;
    }

    #mainPortrait2          {
        margin-left: 0px; 
        margin-top: 0px;
        overflow: hidden;
        visibility:hidden;
    }

    #mainLandscape2             {
        margin-left: 0px; 
        margin-top: 0px;
        overflow: hidden;
        visibility:visible;
    }

    }

CSS が at を宣言しているにもかかわらず、ブラウザーに両方のタブのコンテンツを読み込むように強制するにはどうすればよいdisplay:none;ですか?