• 文字サイズ


解決済

動作変更について教えてください

  • 相談者:非公開
  • 2023/11/15 15:41
お世話になります。
現在クリックすると開くようになっているのですが、最初から開いていてクリックすると閉じるようにしたいのですが、可能でしょうか


<div class="row">
<style>.nms-plugin-20231115025222 .accordion-wrap {
position: relative;
width: 100%;
}

.nms-plugin-20231115025222 .accordion-title {
color: #333;
cursor: pointer;
font-size: 15px;
padding: 10px 20px;
}

.nms-plugin-20231115025222 .accordion-content {
display: none;
padding: 10px 20px;
}

.nms-plugin-20231115025222 .accordion-content p {
margin:0;
line-height:2.5;
}

.nms-plugin-20231115025222 .accordion-content a {
text-decoration: underline;
color: #333;
}

.nms-plugin-20231115025222 .accordion-content a:hover {
color: #FF0000;
}

.nms-plugin-20231115025222 .accordion-content ul li {
list-style: circle;
}

.nms-plugin-20231115025222 .accordion-content ul li span {
color: #a34040;
}

.nms-plugin-20231115025222 .accordion-content p span {
color: #a34040;
}
/* アイコン */

.nms-plugin-20231115025222 .accordion-title {
position: relative;
}
/* 縦線 */

.nms-plugin-20231115025222 .accordion-title::before {
background: #333;
/* 線の色 */
content: "";
height: 2px;
/* 線の太さ */
position: absolute;
right: 25px;
top: 50%;
/* 線の位置を縦中央に */
transform: rotate(90deg);
/* 線を縦に */
transition: transform .3s ease-in-out;
width: 15px;
/* 線の幅 */
}
/* 横線 */

.nms-plugin-20231115025222 .accordion-title::after {
background: #333;
/* 線の色 */
content: "";
height: 2px;
/* 線の太さ */
position: absolute;
right: 25px;
top: 50%;
/* 線の位置を縦中央に */
transition: opacity .3s ease-in-out;
width: 15px;
/* 線の幅 */
}
/* 縦線(クリック後) */

.nms-plugin-20231115025222 .accordion-title.open::before {
transform: rotate(180deg);
}
/* 横線(クリック後) */

.nms-plugin-20231115025222 .accordion-title.open::after {
opacity: 0;
}

.nms-plugin-20231115025222 .que {
background: #007dca;
color: #fff;
display: inline-block;
width: 36px;
height: 36px;
text-align: center;
vertical-align: middle;
line-height: 36px;
margin-right: 15px;
border-radius: 28px;
font-size: 24px;
}
.nms-plugin-20231115025222 .ans {
background: #e3ba00;
color: #fff;
display: inline-block;
width: 36px;
height: 36px;
text-align: center;
vertical-align: middle;
line-height: 36px;
margin-right: 15px;
border-radius: 28px;
font-size: 24px;
float: left;
}



@media(max-width:767px) {
.nms-plugin-20231115025222 .accordion-title {
padding: 10px 50px 10px 20px;
}
}
</style>
<div class="nms-plugin-20231115025222">
<div class="accordion-wrap">
<div class="accordion-container">
<div class="accordion-item" data-id="f5d737a8-b0ad-47bc-b48a-877b79544a67" isbind="1" data-id-use="b47bda47-9d79-408e-a9f9-5859fc829c08">
<h3 class="accordion-title js-accordion-title">
<span class="que">
Q
</span>$GoodsName$
</h3> <!--商品名に質問文-->
<div class="accordion-content">
<span class="ans">
A
</span>
<p>$GoodsIntroduction$
</p> <!--説明文に答え-->
</div>
</div>
</div>
</div>
</div> <!-- nms-plugin-20231115025222 -->
</div> <!-- row -->
<script>$(function () {


jQuery(function ($) {
if (!$("body").hasClass("nms")) {
return;
}});


// タイトルをクリックすると
$(".js-accordion-title").on("click", function () {
// クリックしたタイトル以外のopenクラスを外す(-から+にする)
$(".js-accordion-title").not(this).removeClass("open");
// クリックしたタイトル以外のコンテンツを閉じる
$(".js-accordion-title").not(this).next().slideUp(300);
// クリックしたタイトルにopenクラスを付け外しして+と-を切り替える
$(this).toggleClass("open");
// クリックしたタイトルの次の要素(コンテンツ)を開閉
$(this).next().slideToggle(300);
});
});
</script>
投稿内容について報告する

今気になってる疑問、
セミナーに参加すれば解決するかも!?
日本全国のネットショップ12,000社が参加!
ネットショップでお悩みがある方はまずはオンラインセミナーへGO!
広告0円で楽天の売上アップ続出!
ECマスターズチャンネルをチェック!
総視聴回数15万回突破!
最新の対策事例やSALE対策など、売上にお困りの方はぜひご視聴ください!

  • 返信者:非公開
  • 2023/11/15 18:56
ECマスターズの伊藤です。

> 現在クリックすると開くようになっているのですが、最初から開いていてクリックすると閉じるようにしたいのですが、可能でしょうか………(省略)………
このフォーラムへの質問は終了しました