兄弟の開閉時のアコーディオンスイッチ画像

Question

にはプラス画像とマイナス画像を持つaccordionがあり、これらの画像はtoggled when the accordion is opened and closedです。

現在、1つのアコーディオンを開いて閉じると、効果的にプラスマイナスの画像を切り替えて、開いている兄弟を閉じることができます。

ただし、ここに問題があります。閉じられている兄弟の画像は、プラス画像に切り替わりません。

誰かがアイデアを持っているのかどうか疑問に思う...ありがとう！

$('.accordion').hide(); 
 

 
$('.heading').on('click', function(){ 
 
    $(this).next().slideToggle(400); 
 
    $(this).next().siblings('.accordion').slideUp(400); 
 
}); 
 

 

 
$('.heading2').on('click', function(){ 
 
    $(this).next().slideToggle(400); 
 
    $(this).next().siblings('.accordion').slideUp(400); 
 
});     
 

 

 
$('#minus').hide(); 
 
$('#minus2').hide(); 
 

 

 
$('.heading').on('click', function(){ 
 
    "use strict"; 
 
    $('#plus').fadeToggle(); 
 
    $('#minus').fadeToggle(); 
 
}); 
 

 

 
$('.heading2').on('click', function(){ 
 
    "use strict"; 
 
    $('#plus2').fadeToggle(); 
 
    $('#minus2').fadeToggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="heading"> 
 
    <h4>LOREM IPSUM</h4> 
 
    <img src="images/plus.png" width="20px" height="20px" alt="" id="plus"/> 
 
    <img src="images/minus.png" width="20px" height="3px" alt="" id="minus"/> 
 
</div> 
 
<div class="accordion"> 
 
    <p>The standard chunk of Lorem Ipsum used since the 1500s is 
 
    reproduced below for those interested. Sections 1.10.32 and 1.10.33 
 
    from "de Finibus Bonorum et Malorum" by Cicero are also reproduced 
 
    in their exact original form, accompanied by English versions from 
 
    the 1914 translation by H. Rackham.</p> 
 
</div> 
 

 
<div class="heading2"> 
 
    <h4>LOREM IPSUM2</h4> 
 
    <img src="images/plus.png" width="20px" height="20px" alt="" id="plus2"/> 
 
    <img src="images/minus.png" width="20px" height="3px" alt="" id="minus2"/> 
 
</div> 
 
<div class="accordion"> 
 
    <p>All the Lorem Ipsum generators on the Internet tend to 
 
     repeat predefined chunks as necessary, making this the first 
 
     true generator on the Internet.</p> 
 
</div>

Answer 1

あなたは兄弟アコーディオンを閉じると、あなたは他のアコーディオンのマイナスを隠し、常にプラスを表示する必要があります。 以下のスニペットをご覧ください。

あなたはjQueryのUIを使用することができた場合は、アコーディオンウィジェットに組み込まれている。https://jqueryui.com/accordion/

$('.accordion').hide(); 
 

 
$('.heading').on('click', function(){ 
 
    $(this).next().slideToggle(400); 
 
    $(this).next().siblings('.accordion').slideUp(400); 
 
}); 
 

 

 
$('.heading2').on('click', function(){ 
 
    $(this).next().slideToggle(400); 
 
    $(this).next().siblings('.accordion').slideUp(400); 
 
});     
 

 

 
$('#minus').hide(); 
 
$('#minus2').hide(); 
 

 

 
$('.heading').on('click', function(){ 
 
    "use strict"; 
 
    $('#plus').fadeToggle(); 
 
    $('#minus').fadeToggle(); 
 
    $('#plus2').fadeIn(); 
 
    $('#minus2').fadeOut(); 
 
}); 
 

 

 
$('.heading2').on('click', function(){ 
 
    "use strict"; 
 
    $('#plus2').fadeToggle(); 
 
    $('#minus2').fadeToggle(); 
 
    $('#plus').fadeIn(); 
 
    $('#minus').fadeOut(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="heading"> 
 
    <h4>LOREM IPSUM</h4> 
 
    <img src="images/plus.png" alt="+" width="20px" height="20px" alt="" id="plus"/> 
 
    <img src="images/minus.png" alt="-" width="20px" height="3px" alt="" id="minus"/> 
 
</div> 
 
<div class="accordion"> 
 
    <p>The standard chunk of Lorem Ipsum used since the 1500s is 
 
    reproduced below for those interested. Sections 1.10.32 and 1.10.33 
 
    from "de Finibus Bonorum et Malorum" by Cicero are also reproduced 
 
    in their exact original form, accompanied by English versions from 
 
    the 1914 translation by H. Rackham.</p> 
 
</div> 
 

 
<div class="heading2"> 
 
    <h4>LOREM IPSUM2</h4> 
 
    <img src="images/plus.png" alt="+" width="20px" height="20px" alt="" id="plus2"/> 
 
    <img src="images/minus.png" alt="-" width="20px" height="3px" alt="" id="minus2"/> 
 
</div> 
 
<div class="accordion"> 
 
    <p>All the Lorem Ipsum generators on the Internet tend to 
 
     repeat predefined chunks as necessary, making this the first 
 
     true generator on the Internet.</p> 
 
</div>