ボタンをクリックするとdivを表示

Question

http://www.templategarden.com/preview/tempo/template/index.htmlこのポートフォリオセクションでは、ボタンをクリックすると異なるdivが表示されます。それに応じてメインコンテナのサイズも増減します。 JS/Jqueryが必要になると思います。私はWeb開発の初心者を助けてください、そして、ここで立ち往生しています。

.wrap { 
 
     max-width: 1150px; 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
    } 
 
    
 
    #portone { 
 
     text-align: center; 
 
     margin-top: 80px; 
 
    } 
 
    
 
    .porttwo { 
 
     font-size: 34px; 
 
     color: #222222; 
 
     font-family: 'Montserrat', sans-serif; 
 
     font-weight: 700; 
 
     letter-spacing: -1px; 
 
     text-transform: uppercase; 
 
    } 
 
    
 
    #portthree { 
 
     font-size: 16px; 
 
     color: #888888; 
 
     font-family: 'Open Sans', sans-serif; 
 
     font-weight: 400; 
 
     line-height: 2.1; 
 
    } 
 
    
 
    
 
    /*buttons starts here*/ 
 
    
 
    #select { 
 
     width: 660px; 
 
     height: 45px; 
 
     margin-left: auto; 
 
     margin-right: auto; 
 
     margin-top: 40px; 
 
    } 
 
    
 
    .buttonz { 
 
     margin-left: 9px; 
 
     padding: 10px 22px; 
 
     font-size: 12px; 
 
     font-weight: normal; 
 
     line-height: 20px; 
 
     color: #222222; 
 
     border-radius: 4px; 
 
     text-transform: uppercase; 
 
     font-family: 'Montserrat', sans-serif; 
 
     background-color: #f7f7f7; 
 
     border: 1px solid #f7f7f7; 
 
     cursor: pointer; 
 
    } 
 
    
 
    .buttonz:hover { 
 
     background-color: #7cc576; 
 
     border-color: #7cc576; 
 
     color: #fff; 
 
     transition: ease 0.5s; 
 
    } 
 
    
 
    
 
    /*buttons end here*/ 
 
    
 
    #portfolio_img { 
 
     margin-top: 50px; 
 
    } 
 
    
 
    .project { 
 
     margin-left: 16px; 
 
     margin-bottom: 90px; 
 
    }

  <section class="wrap"> 
 
      <div id="portone"> 
 
       <h1 class="porttwo" id="portfolio">portfolio</h1> 
 
       <h3 id="portthree">Fresh portfolio designs that will keep you wanting you more.</h3> </div> 
 
      <!--buttons starts here--> 
 
      <div id="select"> 
 
       <input class="buttonz" name="button" type="button" value="ALL"> 
 
       <input class="buttonz" name="button" type="button" value="BRANDING"> 
 
       <input class="buttonz" name="button" type="button" value="WEB DESIGN"> 
 
       <input class="buttonz" name="button" type="button" value="PRINT DESIGN"> 
 
       <input class="buttonz" name="button" type="button" value="PHOTOGRAPHY"> </div> 
 
      <!--buttons end here--> 
 
      <!--portfolio images starts here--> 
 
      <div id="portfolio_img"> 
 
       <a href="#"><img class="project" src="http://planusdesign.com/images/Portfolio-pic1.jpg" alt="project-img"></a> 
 
       <a href="#"><img class="project" src="http://planusdesign.com/images/Portfolio-pic2.jpg" alt="project-img"></a> 
 
       <a href="#"><img class="project" src="http://planusdesign.com/images/Portfolio-pic3.jpg" alt="project-img"></a> 
 
       <a href="#"><img class="project" src="http://planusdesign.com/images/Portfolio-pic4.jpg" alt="project-img"></a> 
 
       <a href="#"><img class="project" src="http://planusdesign.com/images/Portfolio-pic5.jpg" alt="project-img"></a> 
 
       <a href="#"><img class="project" src="http://planusdesign.com/images/Portfolio-pic6.jpg" alt="project-img"></a> 
 
      </div> 
 
      <!--portfolio images ends here --> 
 
     </section>

Answer 1

JS/JQは必要ありません。これをチェックして。 Uがリストに属する属性all,web、app、brandを変更することができます

<div class="item" all brand web>1</div> 

.item { 
 
    display: inline-block; 
 
    width: 100px; 
 
    height: 100px; 
 
    margin: 0 16px 16px 0; 
 
    line-height: 100px; 
 
    text-align: center; 
 
    color: #08f; 
 
    font-size: 100px; 
 
    background-color: lightblue; 
 
} 
 
.item, 
 
input[type="radio"] { 
 
    display: none; 
 
} 
 

 
label { 
 
    display: inline-block; 
 
    border: 1px solid #000; 
 
    padding: 1em; 
 
    margin-bottom: 16px; 
 
} 
 
label:hover { 
 
    background-color: blue; 
 
    color: #fff; 
 
} 
 

 
#rball:checked ~ .item[all] { 
 
    display: inline-block; 
 
} 
 
#rbweb:checked ~ .item[web] { 
 
    display: inline-block; 
 
} 
 
#rbapp:checked ~ .item[app] { 
 
    display: inline-block; 
 
} 
 
#rbbrand:checked ~ .item[brand] { 
 
    display: inline-block; 
 
} 
 
hr { 
 
    border: transparent; 
 
    padding: 0; 
 
    margin: 0; 
 
    }

<input name="rb" type="radio" id="rball" checked><label for="rball">All</label> 
 
<input name="rb" type="radio" id="rbweb"><label for="rbweb">Web Design</label> 
 
<input name="rb" type="radio" id="rbapp"><label for="rbapp">App Development</label> 
 
<input name="rb" type="radio" id="rbbrand"><label for="rbbrand">Branding</label> 
 
<hr> 
 
<div class="item" all brand web>1</div> 
 
<div class="item" all app>2</div> 
 
<div class="item" all brand>3</div> 
 
<div class="item" all web>4</div> 
 
<div class="item" all app web>5</div> 
 
<div class="item" all web>6</div> 
 
<div class="item" all app>7</div> 
 
<div class="item" all web>8</div>