| Squad voice

ひじり

メンバー
2023年10月13日 12:17

▼HTML

<script>

var scAccordionBtn = scAccordionBtn || {};

(function(_) {

const target = ‘.js-accordion’;

_.method = function(el) {

const btn = el.querySelector(‘.accordion-btn’);

const contents = el.querySelector(‘.accordion-contents’);

contents.classList.add(‘is-hide’);

btn.addEventListener(‘click’, function() {

contents.classList.toggle(‘is-hide’);

this.classList.toggle(‘is-open’);

});

}

_.init = function() {

Array.from(document.querySelectorAll(target), el => {

_.method(el);

});

};

})(scAccordionBtn);

</script>

<script>

document.addEventListener(‘DOMContentLoaded’, scAccordionBtn.init, false);

</script>

<div class=”accordion-wrap js-accordion”>

<div class=”accordion-btn mark”>

ボタンのテキストが入ります

</div>

<div class=”accordion-contents”>

<div class=”wrap-table-compare”>

<table class=”table-compare”>

<thead>

<tr>

<th>機能一覧</th>

<th>機能詳細</th>

<th>利便性</th>

<th>カテゴリ</th>

</tr>

</thead>

<tbody>

<tr>

<td><a href=”#”>

<figure class=”icon”>

<picture>

<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3112731/b470a448-1d07-452d-acec-196f15f74017.webp”>

<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3112731/b470a448-1d07-452d-acec-196f15f74017.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3112731/b470a448-1d07-452d-acec-196f15f74017.PNG” width=”97″ height=”65″ draggable=”false” class=”lazyload”>

</picture>

</figure>

</a></td>

<td>全国の雨雲レーダーを5分間隔、60時間先まで確認出来る</td>

<td></td>

<td>

雨雲レーダー全国の天気現在地の天気外出の目安

</td>

</tr>

<tr>

<td><a href=”#”>

<figure class=”icon”>

<picture>

<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3112737/d08f7543-dec1-45cf-a64e-92e573ef1eba.webp”>

<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3112737/d08f7543-dec1-45cf-a64e-92e573ef1eba.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3112737/d08f7543-dec1-45cf-a64e-92e573ef1eba.PNG” width=”97″ height=”65″ draggable=”false” class=”lazyload”>

</picture>

</figure>

</a></td>

<td>台風の発生、進路、強さなど台風の詳細情報を確認出来る</td>

<td></td>

<td>

台風詳細台風の進路台風の強さ台風の影響

</td>

</tr>

<tr>

<td><a href=”#”>

<figure class=”icon”>

<picture>

<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3112739/81dcf604-f3b2-415e-a2c9-068681869ebd.webp”>

<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3112739/81dcf604-f3b2-415e-a2c9-068681869ebd.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3112739/81dcf604-f3b2-415e-a2c9-068681869ebd.PNG” width=”97″ height=”65″ draggable=”false” class=”lazyload”>

</picture>

</figure>

</a></td>

<td>全国の週間天気が確認出来る</td>

<td></td>

<td>

週間天気全国の天気天気予報外出の目安

</td>

</tr>

<tr>

<td><a href=”#”>

<figure class=”icon”>

<picture>

<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3112740/7038c014-4081-4f78-a5f2-3fe7f3af5f0b.webp”>

<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3112740/7038c014-4081-4f78-a5f2-3fe7f3af5f0b.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3112740/7038c014-4081-4f78-a5f2-3fe7f3af5f0b.PNG” width=”97″ height=”65″ draggable=”false” class=”lazyload”>

</picture>

</figure>

</a></td>

<td>天気に関する様々なニュースをお届け</td>

<td></td>

<td>

全国の出来事服装チェック旬のニュースキャスター

</td>

</tr>

<tr>

<td><a href=”#”>

<figure class=”icon”>

<picture>

<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3112761/af6d0118-293f-40e9-a5d4-46f628ff3118.webp”>

<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3112761/af6d0118-293f-40e9-a5d4-46f628ff3118.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3112761/af6d0118-293f-40e9-a5d4-46f628ff3118.PNG” width=”97″ height=”65″ draggable=”false” class=”lazyload”>

</picture>

</figure>

</a></td>

<td>全国の熱中症情報が確認出来る</td>

<td></td>

<td>

熱中症情報熱中症リスク全国の気温熱中症対策

</td>

</tr>

<tr>

<td><a href=”#”>

<figure class=”icon”>

<picture>

<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3112764/e366102b-d1e0-4c91-b663-205ad13e11c6.webp”>

<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3112764/e366102b-d1e0-4c91-b663-205ad13e11c6.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3112764/e366102b-d1e0-4c91-b663-205ad13e11c6.PNG” width=”97″ height=”65″ draggable=”false” class=”lazyload”>

</picture>

</figure>

</a></td>

<td>全国のゲリラ豪雨・雷情報が3時間先まで確認出来る</td>

<td></td>

<td>

ゲリラ豪雨全国の天気雨対策雷対策

</td>

</tr>

<tr>

<td><a href=”#”>

<figure class=”icon”>

<picture>

<source type=”image/webp” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3112766/04822f5d-9e77-4370-86ee-c14fb4a6a069.webp”>

<source type=”image/avif” srcset=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3112766/04822f5d-9e77-4370-86ee-c14fb4a6a069.avif”><img src=”https://file.mysquadbeyond.com/uploads/article_photo/photo/3112766/04822f5d-9e77-4370-86ee-c14fb4a6a069.PNG” width=”97″ height=”65″ draggable=”false” class=”lazyload”>

</picture>

</figure>

</a></td>

<td>全国各地の方が地域ごとの天気情報を 投稿してくれる</td>

<td></td>

<td>

投稿リポート全国の天気空模様・気温風の強さ

</td>

</tr>

</tbody>

</table>

</div>

</div>

</div>

ひじり