Active content を使わずにActiveなebayテンプレート（アコーディオン編）

アコーディオンっぽく動くebayテンプレートを作ってみました。

ebayがOKとしているHTMLとCSSのみで作ってるので、今後のポリシーにも今のところ対応してます。

ベーシックなタイプなのでどんな商品にも使えるのではないでしょうか。

早速コードをコピペする（HTMLへ移動▼）

アコーディオンっぽく動くebayテンプレートはこんな見た目

今回のテーマはebayが今後アウトにしてるアクティブコンテンツを使わないけど、ちょっと動的に見えるebayテンプレートです。

【クリックでデモページへ】

デモページはこちら

Information部分をタップするとそれぞれの説明が開きます。

さらにスマホにも対応してるので、パソコンからご覧の方はデモページをサイズ変化させると動きの内容が分かりやすいです。

コレは最高だぜ！すぐ使いたいぜ！という方は、次のソースをどうぞ

HTML + CSS はこちら

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<style>
section,aside,footer, ul, li,p{
font-family: 'Open Sans', sans-serif;
}
h1{
font-family: 'Roboto Condensed', sans-serif;}
h2{
text-align: center;
font-size:18px;
}
#pagewrap {
padding: 5px;
width: 960px;
margin: 5px auto;
}
header {
height: 100px;
padding: 0 15px;
}
#content {
width: 430px;
float: left;
padding: 5px 15px;
}
#middle {
width: 45%;
margin: 0px 0px 5px 5px;
float: right;
padding: 5px 15px;
}
#main {
clear: both;
padding: 1% 4%;
width: auto;
float: none;
}
footer {
padding: 5px 15px;
background:#bebebe;
}
.dec_img img{
max-width:100%;
margin-bottom:10px;
box-shadow: 3px 3px 5px rgba(102,102,102,1);
-webkit-box-shadow: 3px 3px 5px rgba(102,102,102,1);
-moz-box-shadow: 3px 3px 5px rgba(102,102,102,1);
}
.accordion label {
font-family: 'Roboto Condensed', sans-serif;
display: block;
margin: 10px 0px;
padding: 1em;
background-color: #f6f6f6;
border: 1px solid #ccc;
border-radius: 4px;
cursor: pointer;
color: #333;
font-size:20px;
}
#main input {
display: none;
}
#main input + label div {
opacity: 0;
padding: 0px 0px;
height: 0px;
font-weight: 100;
overflow: hidden;
}
#main input:checked + label div {
opacity: 1;
padding: 5px 0px;
height: auto;
font-weight: 500;
}
#main div {
transition: all 0.3s ease-out 0s;
}
label:before {
font-family:"FontAwesome";
content:"\f25a";
color:#57CC37;
font-size:20px;
margin-right:10px;
}
label#shiharai:before {
font-family:"FontAwesome";
content:"\f1ed";
}
label#hasso:before {
font-family:"FontAwesome";
content:"\f0d1";
}
label#tyuui:before {
font-family:"FontAwesome";
content:"\f071";
}
/* MEDIA QUERIES */
@media screen and (max-width: 980px) {
#pagewrap {
width: 94%;
}
#content {
width: 45%;
}
#middle {
width: 43%;
margin: 0px 0px 5px 5px;
float: right;
}
header,
footer {
padding: 1% 4%;
}
}
@media screen and (max-width: 600px) {
#content {
width: auto;
float: none;
}
#middle {
width: auto;
float: none;
margin-left: 0px;
}
}
@media screen and (max-width: 480px) {
header {
height: auto;
}
h1,h2 {
font-size: 1.3em;
}
.dec_img img:not(:first-child){
display:none;
}
}
header,
#content,
#middle,
#main {
margin-bottom: 5px;
}
</style>
<div id="pagewrap">
<header>
<h1>Item Title Item Title Item Title Item Title Item Title Item Title Item Title Ite</h1>
</header>
<section id="content"><h2>Product Description</h2>
<div vocab="https://schema.org/" typeof="Product"><span property="description">
こちらに商品説明を入力してください。This paragraph contains almost 800 characters of text to be displayed in the mobile item description. And the text in this paragraph through this sentence contains 250 characters, which is the amount we will display without any actions on your part. When you tag a paragraph with these HTML breaks, the content will be displayed to shoppers looking at your item.
This will allow the shopper to see the key information you want to display, without them having to click through to the complete description. If your complete description is 800 characters or less and uses basic HTML we will display the entire description without any action on your behalf the best practice is to keep it within 800 characters.</span></div>
</section>
<section id="middle">
<h2>Product Images</h2>
<div class="dec_img">
<img src="https://bvb-arigato.com/wp/ebay-template/images/lsh0012-004.jpg" alt="bvb1">
</div>
</section>
<aside id="main">
<h3>Information</h3>
<div class="accordion">
<input type="radio" name="accordion1" id="accordion1A" checked="">
<label for="accordion1A" id="shiharai">Payment (+ tap to open)<div>こちらに支払い方法を入力してください。Your Payment Details will be inserted here.</div>
</label>
</div>
<div class="accordion">
<input type="radio" name="accordion1" id="accordion1B">
<label for="accordion1B" id="hasso">Shipping (+ tap to open)<div>こちらに発送方法を入力してください。Your Shipping Details will be inserted here</div>
</label>
</div>
<div class="accordion">
<input type="radio" name="accordion1" id="accordion1C">
<label for="accordion1C">Terms of Sale (+ tap to open)<div>こちらに取引事項を入力してください。Your Terms of Sale will be inserted here.</div>
</label>
</div>
<div class="accordion">
<input type="radio" name="accordion1" id="accordion1D">
<label for="accordion1D">About Us (+ tap to open)<div>こちらに出品者概要を入力してください。Your About Us information will be inserted here.</div>
</label>
</div>
<div class="accordion">
<input type="radio" name="accordion1" id="accordion1E">
<label for="accordion1E" id="tyuui">
International Buyers - Please Note: (+ tap to open)<div>Import duties, taxes, and charges are not included in the item price or shipping cost. These charges are the buyer's responsibility. Please check with your country's customs office to determine what these additional costs will be prior to bidding or buying.</div>
</label>
</div>
</aside>
<footer>
<h3>Footer</h3>
<p>Footer text</p>
</footer>
</div>

一部変更：
写真の枠線を消して、影が入る部分をrgba指定しました。古いアンドロイド用。タップする部分に文言追加。

実際に使用して頂ける方は、ebayのHTMLテンプレート入力するところにそのままコピペして内容を商品に沿ってご変更ください。使用している画像は必ず変更してください（参考で使っている画像は保護のためリダイレクトかけてます）

参考

ebayでHTMLテンプレートを使う方法はこちら

Copy押した後にコピーすると、そのままコードだけ正しくコピーできます。