jQueryさまざまな要素のトラブルシューティングを表示/非表示

Question

私はウェブサイトを設計しようとしています。私は自分の正面をデザインしたので、ヘッダーとフッター以外のすべてを隠すはずの "Portfolio"

私のHTMLのようなある：

<div class="header" id="front-show"> 
     <div class="header-kevin-vfx"> 
      <a href="#"><h1 id="front-show">Kevin VFX</h1></a> 
     </div> 

     <div class="header-portfolio" id="portfolio-show"> 
      <a href="#"><h1>Portfolio</h1></a> 
     </div> 
    </div> 

<div class="content-wrapper"> 
    <div class="site-title hidden"> 
     <h1>Kevin VFX</h1> 
     <p>Marketing the modern way</p> 
    </div> 

</div> 

<div class="portfolio-wrapper"> 
    <div class="portfolio"> 
     <h1>Portfolio</h1> 
     <p>Click a video thumbnail to watch a video</p> 
    </div> 
</div>  

    <div class="footer"> 
     <div class="copyright"> 
      <p>Copyright 2016 © Kevin From</p> 
     </div> 
    </div> 

マイCSS：

div.content-wrapper { 
    min-width: 100%; 
    min-height: 100%; 
    background-color: rgba(0,0,0,0.1); 
    z-index:1; 
    position:fixed; 
    transform:translate(-50%,-50%); 
    top:50%;left:50%; 
} 

div.header { 
    z-index:3; 
    height:70px; 
    background-color:rgba(204,204,204,0.3); 
    width:100%; 
    position: absolute; 
    top:0; 
} 

div.header a h1 { 
    text-decoration: none; 
    color:rgba(250,250,250,0.7); 
    text-transform: uppercase; 
} 

div.header a h1:hover { 
    color:rgba(255,255,255,1); 
} 

div.header div.header-kevin-vfx { 
    position:absolute; 
    top:0; 
    left:0; 
    padding-left:7px; 
} 

div.header div.header-portfolio{ 
    position:absolute; 
    right:0; 
    top:0; 
    padding-right:7px; 
} 

div.footer { 
    z-index:3; 
    height:30px; 
    background-color:rgba(204,204,204,0.3); 
    position:absolute; 
    bottom:0; 
    width:100%; 
} 

div.footer div.copyright p { 
    text-align: center; 
    font-size:1em; 
} 

と私のスクリプトの最後には、次のとおりです。

$(document).ready(function() { 
$('div.portfolio-wrapper').hide();   
$('div.hidden') 
     .fadeIn(1500) 
     .slideUp(500) 
     .slideDown(500) 
     .removeClass('hidden'); 
}); 

$('#front-show').onclick(function() { 
    $('.portfolio-wrapper').hide(500).delay(500); 
    $('.content-wrapper').show(500); 
}); 

$('#portfolio-show').onclick(function() { 
    $('.content-wrapper').hide(500).delay(500); 
    $('.portfolio-wrapper').show(500); 
}); 

は、事前に、あなたの助けのためにありがとうございました！

Answer 1

$('#front-show').find('.content-wrapper, .portfolio-wrapper').hide();