如何使用jQuery在基本手风琴上添加正负号？

Question

I'm using basic jQuery accordion written by Luca Filosofi from this thread . Here is my version:

$('.product-details .post-body dl dt').on('click', function (e) {
    e.preventDefault();
    $(this).parent('dl').children('dd:visible').slideUp('fast');
    $(this).nextUntil('dt').filter(':not(:visible)').slideDown('fast');
});

The script works perfectly. However, I don't know how to have plus and minus text ( + , - ) attached before the Title (eg: + Title) based if the content is shown or not.

I have the following permanent markup and it must stay as is. Must not add more class or html, except via jQuery:

<dl>
    <dt>Title</dt>
    <dd>Description 01</dd>
    <dd>Description 02</dd>

    <dt>Title</dt>
    <dd>Description 01</dd>
    <dd>Description 02</dd>
    <dd>Description 03</dd>
</dl>

Answer 1

You could toggle the icons when they click like this:

$('.product-details .post-body dl dt').on('click', function (e) {
    e.preventDefault();
    $(this).parent('dl').children('dd:visible').slideUp('fast');
    $(this).nextUntil('dt').filter(':not(:visible)').slideDown('fast');
    $(this).closest('i').toggleClass("icon-circle-plus icon-circle-minus");
});

Answer 2

You need to get last character of dt text using .slice() . If last character is + change it to - and if it is - change to + .

 $('dl dd').slideUp('fast'); $('dl dt').on('click', function () { $(this).parent().children('dd:visible').slideUp('fast'); $(this).nextUntil('dt').not(':visible').slideDown('fast'); $(this).text(function(i, text){ return (text.slice(-1) == "-") ? (text.slice(0, -1) + " +") : (text.slice(0, -1) + " -"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <dl> <dt>Title +</dt> <dd>Description 01</dd> <dd>Description 02</dd> <dt>Title +</dt> <dd>Description 01</dd> <dd>Description 02</dd> <dd>Description 03</dd> </dl>