要素が他の要素の内側にある場合にのみ表示

Question

私はボックスを作成しようとしていましたが、クリックするとスライドする要素が2つありますが、それらをボックス内にのみ表示します。

ここで私の厄介な、愚かな、stinkin 'コード、助けてください。

HTML

<input id="toggle" type="checkbox"> 
<label for="toggle"> 
    <button>switch</button> 
</label> 
<div id="box" style="background:rgba(0, 0, 0, 0.4); box-shadow:inset 0px 0px 10px 0px #000; 
    text-shadow: 2px 2px 2px #000; padding: 5px 5px 5px 5px; letter-spacing: 0px; font-size: 18px;"> 
    <div id="slider"> 
    <table> 
     <tr> 
     <td id="t2"><a id="s2" href="https://soundcloud.com/" target="_blank" rel="noopener nofollow">Soundcloud</a></td> 
     <td id="t2"><a id="s2" href="https://mixcloud.com/" target="_blank" rel="noopener nofollow">Mixcloud</a></td> 
     <td id="t2"><a id="s2" href="bandcamp.com" target="_blank" rel="noopener nofollow">Bandcamp</a></td> 
     <td id="t2"><a id="s2" href="https://hearthis.at" target="_blank" rel="noopener nofollow">Hearthis.at</a></td> 
     <td id="t2"><a id="s2" href="https://archive.org" target="_blank" rel="noopener nofollow">Archive</a></td> 
     </tr> 
    </table> 
    </div> 
    <div id="slider2"> 
    <table> 
     <tr> 
     <td id="t2">1111111111111</td> 
     <td id="t2">222222</td> 
     <td id="t2">333333</td> 
     <td id="t2">4444444444</td> 
     <td id="t2">5555555</td> 
     </tr> 
    </table> 
    </div> 
</div> 

CSS。

#box { 
    height: 50px; 
    width: 100%; 
    border: 1px solixyzd #ccc; 
} 
#slider { 
    -webkit-transition: all .5s cubic-bezier(0.42,0,0.58,1); 
    transition: all .5s cubic-bezier(0.42,0,0.58,1); 
} 
#toggle { 
    position: absolute; 
    visibility: hidden; 
} 
#toggle + label { 
    cursor: pointer; 
} 
#slider2 { 
    margin-top: -100px; 
    overflow-y: hidden; 
    -webkit-transition: all .5s cubic-bezier(0.42,0,0.58,1); 
    transition: all .5s cubic-bezier(0.42,0,0.58,1); 
} 
#toggle:checked ~ #box > #slider { 
    margin-top: -80px; 
} 
#toggle:checked ~ #box > #slider2 { 
    margin-top: 50px; 
} 

https://codepen.io/pen/xdeevd

Answer 1

追加オーバーフロー：ボックスに隠された作業をする必要があります。

#box { 
    overflow: hidden; 
    height: 50px; 
    width: 100%; 
    border: 1px solid #ccc; 
} 

Answer 2

デフォルトの子が隠されている、親と子クラスを使用します。この例のように。

のCss：

.child{display:none} 
.parent .child{ display:block } 

HTML：

<div class="parent"> 
    <div class="child"> Visible Division </div> 
</div> 
<div class="child">Hidden Division</div> 

Answer 3

あなたはそのように動作しないようにあなたを隠します。

だから、それはあなたがより多くのアニメーションやはい左コーナー をクリックするようにチェックボックスの仕事のために、独自のアイデアを使用するかが同時にチェックボックスを隠すためのgoogleできる

#toggle { 
position: absolute; 
opacity: 0; 
} 
#toggle:checked ~ #box > #slider2{ 
    margin-top: 10px; 
    display: block; 
} 
#toggle:checked ~ #box > #slider{ 
    display: none; 
} 

休憩を動作するCSSの下に変更それを機能させる。

ありがとう、 Debashis