HTMLを使うことで、アコーディオン形式でよくある質問を1つのヒントにまとめることができます。
以下のサンプルコードを利用して、早速実装してみましょう!
■設定手順
- 左バーの作成済ヒントにカーソルを移動する
- 表示される「+」をクリック
- ヒントのブロックを追加する際に「HTML」を選択
- HTMLエディタ内にサンプルコードを貼り付ける
(サンプルコード)
<details class="onb-accordion">
<summary>
Q1: 質問を記載します。
</summary>
<p class="onb-accordion-content">
回答を記載します。<br>
改行する際にはbrを加えます。<br>
分かりやすく、端的に書きましょう。
</p>
</details>
<details class="onb-accordion">
<summary>
Q2: 質問を記載します。
</summary>
<p class="onb-accordion-content">
回答を記載します。<br>
改行する際にはbrを加えます。<br>
分かりやすく、端的に書きましょう。
</p>
</details>
<style>
.onb-accordion:not([open]) {
margin-bottom: 7px;
}
.onb-accordion summary {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
padding: 0.5em 0em;
border-radius: 5px;
/*文字カラー*/
color: #555;
/*文字カラー*/
/*文字の大きさ*/
font-size: 16px;
/*文字の大きさ*/
font-weight: bold;
cursor: pointer;
}
.onb-accordion summary::-webkit-details-marker {
display: none;
}
.onb-accordion summary::before,
.onb-accordion summary::after {
width: 2px;
height: .9em;
border-radius: 5px;
background-color: #555;
content: '';
}
.onb-accordion summary::before {
position: absolute;
right: 0em;
rotate: 90deg;
}
.onb-accordion summary::after {
transition: rotate .3s;
}
.onb-accordion[open] summary::after {
rotate: 90deg;
}
.onb-accordion-content{
transform: translateY(-10px);
opacity: 0;
margin: 0 0 0 10px;
/*文字カラー*/
color: #555;
/*文字カラー*/
/*文字の大きさ*/
font-size: 16px;
/*文字の大きさ*/
transition: transform .5s, opacity .5s;
}
.onb-accordion[open] p {
transform: none;
opacity: 1;
}
</style>