CODEWITHSUNDEEP
javascriptjqueryhtmlaccordion
Biyans
Biyans

Reputation: 63

How to add plus minus symbol to a basic accordion using jquery?

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 (e.g: + 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>

Upvotes: 0

Views: 1069

Answers (2)

Mohammad
Mohammad

Reputation: 21489

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>

Upvotes: 1

CardCaptor
CardCaptor

Reputation: 420

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");
});

Upvotes: 1

Related Questions