前回も同じような質問をして申し訳ないのですが
例えば#simple-btnをclickした時#simple-innerが表示されていなくてに#input-innerの要素が表示されている場合
#simple-btnをclickした時#simple-innerを出して#input-innerを隠したいです。他の要素も同様に機能させたいです。
HTML
1<!-- simple --> 2 <div id="simple-id" class="item"> 3 <a href="#" class="simple-btn" name="inner">簡略化</a> 4 </div> 5 <div class="icon-inner" id="simple-inner"> 6 <div class="cp_cssslider"> 7 <div class="cp_slidewrapper"> 8 <div class="cp_slide_item"><img src="other/ARTRACTION img_180723_0008.jpg"></div> 9 <div class="cp_slide_item"><img src="other/ARTRACTION img_180723_0007.jpg"></div> 10 </div> 11 </div> 12 </div> 13 14 15 <!-- input --> 16 <div class="item" id="input-id"> 17 <a href="#" class="input-btn" name="inner" id="input">吸収力</a> 18 </div> 19 <div class="icon-inner" id="input-inner"> 20 <div class="cp_cssslider"> 21 <div class="cp_slidewrapper"> 22 <div class="cp_slide_item"><img src="other/ARTRACTION img_180723_0005.jpg"></div> 23 <div class="cp_slide_item"><img src="other/ARTRACTION img_180723_0004.jpg"></div> 24 </div> 25 </div> 26 </div> 27 28 <!-- time --> 29 <div class="item" id="time-id"> 30 <a href="#" class="time-btn" name="inner" id="time">時短化</a> 31 </div> 32 <div class="icon-inner" id="time-inner"> 33 <div class="cp_cssslider"> 34 <div class="cp_slidewrapper"> 35 <div class="cp_slide_item"><img src="other/ARTRACTION img_180723_0002.jpg"></div> 36 <div class="cp_slide_item"><img src="other/ARTRACTION img_180723_0001.jpg"></div> 37 </div> 38 </div> 39 </div> 40 41 42 <!-- global --> 43 <div class="item" id="global-id"> 44 <a href="#" class="global-btn" name="inner" id="global">グローバル化</a> 45 </div> 46 <div class="icon-inner" id="global-inner"> 47 <div class="cp_slide_item"><img src="other/ARTRACTION img_180723_0012.jpg"></div> 48 </div> 49 50 51 <!-- anony --> 52 <div class="item" id="anony-id"> 53 <a href="#" class="anony-btn" name="inner" id="anony">匿名性</a> 54 </div> 55 <div class="icon-inner" id="anony-inner"> 56 <div class="cp_slide_item"><img src="other/ARTRACTION img_180723_0011.jpg"></div> 57 </div> 58 59 <!-- share --> 60 <div class="item" id="share-id"> 61 <a href="#" class="share-btn" name="inner" id="share">共有</a> 62 </div> 63 <div class="icon-inner" id="share-inner"> 64 <div class="cp_slide_item"><img src="other/ARTRACTION img_180723_0013.jpg"></div> 65 </div> 66 </ul> 67 </div>
jQuery
1$('#simple-btn,#input-btn,#time-btn,#global-btn,#anony-btn,#share-btn').on('click',function(){ 2 $('#simple-btn,#input-btn,#time-btn,#global-btn,#anony-btn,#share-btn:not(#slide'+$(this).attr('id').substr(-3)+')').hide(); 3 $('#simple-btn,#input-btn,#time-btn,#global-btn,#anony-btn,#share-btn'+$(this).attr('id').substr(-3)).toggle(); 4 })
css
1 2.simple-btn,.input-btn,.time-btn,.global-btn,.anony-btn,.share-btn{ 3 width: 20%; 4 display: inline-block; 5 padding: 1em 1em; 6 text-decoration: none; 7 background: #fafafa; 8 font-size: 30px; 9 font-weight: bold; 10 text-align: center; 11} 12.simple-btn,.input-btn,.time-btn,.global-btn,.anony-btn,.share-btn:active { 13 box-shadow: inset 0 0 2px rgba(128, 128, 128, 0.1); 14 transform: translateY(2px); 15} 16 17.simple-btn{ 18 border-left: solid 20px #da302c;/*左線*/ 19 color: #da302c;/*文字色*/ 20} 21 22.input-btn{ 23 border-left: solid 20px #3a5fe9;/*左線*/ 24 color: #3a5fe9;/*文字色*/ 25} 26 27.time-btn{ 28 border-left: solid 20px #d8cd47;/*左線*/ 29 color: #d8cd47;/*文字色*/ 30} 31 32.global-btn{ 33 border-left: solid 20px #50d64a;/*左線*/ 34 color: #50d64a;/*文字色*/ 35} 36 37.anony-btn{ 38 border-left: solid 20px #964ad6;/*左線*/ 39 color: #964ad6;/*文字色*/ 40} 41 42.share-btn{ 43 border-left: solid 20px #e4892f;/*左線*/ 44 color: #e4892f;/*文字色*/ 45} 46 47.icon-inner{ 48 display: none; 49} 50 51.icon-inner img{ 52 width: 100%; 53}