class指定を使ってクリックでセクションの表示・非表示を切り替えるたい

Question

前提

参考URLにあるようなクリックでセクションの表示・非表示を切り替える機能を実装しました。
https://agohack.com/show-hide-toggle-on-click-with-jquery/

実現したいこと

参考URL内の「2. ボタンで切り替え」部分の物を実装しました。正常に動作しています。
切り替えのボタンを2つ（同一リンク先）設置したいのですが、セレクタがID指定となっているので同ページ内で2回使用できません。
よって、ボタン内切り替えのトリガーをclassセレクタにしたいと考えています。

発生している問題・エラーメッセージ

class指定に変更しましたがうまく動作しません。

該当のソースコード

<div class="service-contents sec1">
	<p>サンプルテキスト1</p>
	<ul class="navi">
		<li class="prev"><button class='secList sec3'>PREV</button></li>
		<li class="next"><button class='secList sec2'>NEXT</button></li>
	</ul>
</div>

<div class="service-contents sec2">
	<p>サンプルテキスト2</p>
	<ul class="navi">
		<li class="prev"><button class='secList sec1'>PREV</button></li>
		<li class="next"><button class='secList sec3'>NEXT</button></li>
	</ul>
</div>

<div class="service-contents sec3">
	<p>サンプルテキスト3</p>
	<ul class="navi">
		<li class="prev"><button class='secList sec2'>PREV</button></li>
		<li class="next"><button class='secList sec1'>NEXT</button></li>
	</ul>
</div>


|
|
|

<ul>
	<li><button class='secList sec1'>サンプル1を表示</button></li>
	<li><button class='secList sec2'>サンプル2を表示</button></li>
	<li><button class='secList sec3'>サンプル3を表示</button></li>
</ul>

jQuery(function($){
  $('.service-contents').hide();

  $('.secList').on('click',function(){
    $('.service-contents').not($('.'+$(this).attr('class'))).hide(500);
    $('.'+$(this).attr('class')).show(500);
  });
});

よろしくお願い致します。

Answer 1

$(this).attr('class')で取得できるのが"secList sec1"等secListが入っていてセレクター.secList sec1が見つからないのだと思われます。
クラスではなくカスタムデータ属性でdata-section="sec1"等をつけて$(this).data('section')とかで取得するといいんじゃないでしょうか。

Comments

[tacchanss]

ご回答ありがとうございます。
HTML,jQueryを以下のとおり修正しましたが、やはり動作しません。
何度も申し訳ございません。ご教授頂ければ幸いです。

【HTML】
<div class="service-contents" data-servicetype="sec1">
<p>サンプルテキスト1</p>
<ul class="navi">
<li class="prev"><button class='secList' data-servicetype="sec3">PREV</button></li>
<li class="next"><button class='secList' data-servicetype="sec2">NEXT</button></li>
</ul>
</div>

<div class="service-contents" data-servicetype="sec2">
<p>サンプルテキスト2</p>
<ul class="navi">
<li class="prev"><button class='secList' data-servicetype="sec1">PREV</button></li>
<li class="next"><button class='secList' data-servicetype="sec3">NEXT</button></li>
</ul>
</div>

<div class="service-contents" data-servicetype="sec3">
<p>サンプルテキスト3</p>
<ul class="navi">
<li class="prev"><button class='secList' data-servicetype="sec2">PREV</button></li>
<li class="next"><button class='secList' data-servicetype="sec1">NEXT</button></li>
</ul>
</div>

|
|
|

<ul>
<li><button class='secList' data-servicetype="sec1">サンプル1を表示</button></li>
<li><button class='secList' data-servicetype="sec2">サンプル2を表示</button></li>
<li><button class='secList' data-servicetype="sec3">サンプル3を表示</button></li>
</ul>

【jQuery】
jQuery(function($){
$('.service-contents').hide();

$('.secList').on('click',function(){
$('.service-contents').not($($(this).data('section'))).hide(500);
$($(this).data('section')).show(500);
});
});

[tacchanss]

失礼致しました。
コードが誤っておりました。

【HTML】
<div class="service-contents" data-section="sec1">
<p>サンプルテキスト1</p>
<ul class="navi">
<li class="prev"><button class='secList' data-section="sec3">PREV</button></li>
<li class="next"><button class='secList' data-section="sec2">NEXT</button></li>
</ul>
</div>

<div class="service-contents" data-section="sec2">
<p>サンプルテキスト2</p>
<ul class="navi">
<li class="prev"><button class='secList' data-section="sec1">PREV</button></li>
<li class="next"><button class='secList' data-section="sec3">NEXT</button></li>
</ul>
</div>

<div class="service-contents" data-section="sec3">
<p>サンプルテキスト3</p>
<ul class="navi">
<li class="prev"><button class='secList' data-section="sec2">PREV</button></li>
<li class="next"><button class='secList' data-section="sec1">NEXT</button></li>
</ul>
</div>

|
|
|

<ul>
<li><button class='secList' data-section="sec1">サンプル1を表示</button></li>
<li><button class='secList' data-section="sec2">サンプル2を表示</button></li>
<li><button class='secList' data-section="sec3">サンプル3を表示</button></li>
</ul>

【jQuery】
jQuery(function($){
$('.service-contents').hide();

$('.secList').on('click',function(){
$('.service-contents').not($($(this).data('section'))).hide(500);
$($(this).data('section')).show(500);
});
});

[tacchanss]

ご回答いただきましてありがとうございました。
頂いたアドバイスを元に、再度確認したところ、以下のコードで動作しました。
この度はありがとうございました。

【HTML】
<div class="service-contents sec1">
<p>サンプルテキスト1</p>
<ul class="navi">
<li class="prev"><button class='secList' data-section="sec3">PREV</button></li>
<li class="next"><button class='secList' data-section="sec2">NEXT</button></li>
</ul>
</div>

<div class="service-contents sec2">
<p>サンプルテキスト2</p>
<ul class="navi">
<li class="prev"><button class='secList' data-section="sec1">PREV</button></li>
<li class="next"><button class='secList' data-section="sec3">NEXT</button></li>
</ul>
</div>

<div class="service-contents sec3">
<p>サンプルテキスト3</p>
<ul class="navi">
<li class="prev"><button class='secList' data-section="sec2">PREV</button></li>
<li class="next"><button class='secList' data-section="sec1">NEXT</button></li>
</ul>
</div>

|
|
|

<ul>
<li><button class='secList' data-section="sec1">サンプル1を表示</button></li>
<li><button class='secList' data-section="sec2">サンプル2を表示</button></li>
<li><button class='secList' data-section="sec3">サンプル3を表示</button></li>
</ul>

【jQuery】
jQuery(function($){
$('.service-contents').hide();

$('.secList').on('click',function(){
$('.service-contents').not($($(this).data('section'))).hide(500);
$('.'+$(this).data('section')).show(500);
});
});