CODEWITHSUNDEEP
jquerytogglebutton
tonylka10
tonylka10

Reputation: 35

Jquery plus and minus button toggle

I am a bit of an amateur so I don't know how to achieve this goal. I would have some buttons that need to toggle plus or minus:

http://jsfiddle.net/tonylka10/0eq456w9/

Jquery:

$(document).ready(function () {
$('.expandable').click(function () {
    $('.expandable').not(this).nextAll('tr').hide();
    $(this).nextAll('tr').toggle(350);

});
$('.expandable').nextAll('tr').each(function () {
    if (!($(this).is('.expandable'))) $(this).hide();
});
});

How can I achieve this with the code that I already have?

I would like to have the same functionality as the example below:

http://jsfiddle.net/v9Evw/1/

Any help would be appreciated, thank you in advance.

Upvotes: 1

Views: 1609

Answers (4)

PeterKA
PeterKA

Reputation: 24638

Add the following code to the event handler:

    $(this).find('[id^=myButton]').val(function(i,v) { 
        return v.trim() == '+' ? '-' : '+';
    });
    $('.expandable').not(this).find('input[type="button"]').val("+");

DEMO

Upvotes: 3

DeadlyChambers
DeadlyChambers

Reputation: 5275

Try swapping in your js

$('li h3, li span', parent).click(function()

for

$('li h3', parent).click(function()

Then you can put different images in the spans, try using bootstrap they have some pretty nice glpyhicons bs components

Give this a look it is using bootstrap for you images. Demo

Upvotes: 0

Mathieu Labrie Parent
Mathieu Labrie Parent

Reputation: 2596

Working fiddle :

http://jsfiddle.net/0eq456w9/10/

$('.expandable').click(function () {
    $('.expandable').not(this).nextAll('tr').hide();
    $('.expandable').not(this).find('input[type="button"]').val("+");
    $(this).nextAll('tr').toggle(350);
    if( $(this).find('input[type="button"]').val() == "+")
    {
        $(this).find('input[type="button"]').val("-");
    }
    else
    {
        $(this).find('input[type="button"]').val("+");
    }

});

Upvotes: 2

KyleK
KyleK

Reputation: 5056

You can put the span in the h3 or add the span in click event target. http://jsfiddle.net/v9Evw/238/

<ul id="toggle-view">
    <li>
        <h3>Title 1<span>+</span></h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
    </li>
    <li>
        <h3>Title 2<span>+</span></h3>

        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
    </li>
    <li>
        <h3>Title 3<span>+</span></h3>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
    </li>
</ul>

Upvotes: 1

Related Questions