Bootstrap Toggle text change on multiple elements

Question

Hello i have the following issue while using a bootstrap toggle.

Code as follow

(I copied the wrong section of HTML code so i edited the question this is the actual code wich is being applied to toggle)

                <div class="panel-group" id="accordion">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title active">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Electronics <span class="more">+</span></a>
                  </h4>
                </div>
                <div id="collapseOne" class="panel-collapse collapse">
                  <div class="panel-body">
                    <ul>
                        <li><a href="#">Item 1</a> (2)</li>
                        <li><a href="#">Item 2</a> (1)</li>
                        <li><a href="#">Item 3</a> (3)</li>
                    </ul>                   
                  </div>
                </div>
              </div><!--  panel 1-->
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h4 class="panel-title">
                    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Cartridges <span class="more">+</span></a>
                  </h4>
                </div>
                <div id="collapseTwo" class="panel-collapse collapse">
                  <div class="panel-body">
                    <ul>
                        <li><a href="#">Item 1</a> (2)</li>
                        <li><a href="#">Item 2</a> (1)</li>
                        <li><a href="#">Item 3</a> (3)</li>
                    </ul>                   
                  </div>
                </div>
              </div><!--  panel 2-->
                      </div><!-- panel group -->

And this is what i'm using to replace the text

    $('.more').click(function(){ 
    $(this).text(function(i,old){
        return old=='+' ?  '-' : '+';
    });
});

So i wanted to change the text of div class=more to minus(-) when the element it's clicked

on this thread i found the answer Twitter bootstrap collapse: change display of toggle button

However as i have multiple items, when i click on one of them, the sign changes to (-) that works flawlessly, but if i click on another "item" the first one collapses but the sign remains (-) instead of changing to (+)

How can i do it? i know it's a simple question and maybe a simple answer but i'm kinda stuck in here.

Thanks for your help

score 2 · Accepted Answer · answered Dec 04 '13 at 16:25

2

In my opinion you should be hooking in to the native Bootstrap events :

$('.dropdown').on({
    'show.bs.dropdown': function () {
        var l = $('.more', this).html('-')
        $('.more').not(l).html('+')
    },
    'hidden.bs.dropdown': function () {
        $('.more', this).html('+')
    }
});

FIDDLE

answered Dec 04 '13 at 16:25

adeneo

312,895
29
395
388

I see the fiddle working, but in my code is not doing anything. I'm using boostrap 2.0 (well not me, my frontend designer) does it have anything to do with this issue? – DJ22T Dec 04 '13 at 16:43
i see what's happening now, the document has other toggle elements with the class .dropwdown, so it's being applied to the first one it found, however is it possible to do it for every block with dropdown class and apply it just to the current element being toogled? – DJ22T Dec 04 '13 at 17:03
@DannyG - This is mainly for Bootstrap 3 and up, and won't work with 2.0 as far as I know. – adeneo Dec 04 '13 at 17:28
It's working but i was wrong in my copied code, here is it fixed, can you possibly take a look at it? so i can accept your answer. Thanks – DJ22T Dec 04 '13 at 19:06
@DannyG - from the HTML, I'm guessing something like this should work -> http://jsfiddle.net/25NXZ/5/ – adeneo Dec 04 '13 at 19:20
i don't know what's happening now, when i run it on fiddle it works great, but not on my html page, you can see it here http://enobasistemas.com/serytelresponsive/productos.php on the left side where the word "categorias" appear. if i change "show" or "hidden" to any other event like "click" or "hover" it works, but not properly, its like it is not detecting the "show" and "hidden" selectors – DJ22T Dec 05 '13 at 13:58

score 1 · Answer 2 · answered Dec 04 '13 at 16:17

Along with updating current more element, you need to update all other more elements to +

var $mores = $('.more').click(function () {
    $(this).text(function (i, old) {
        return old == '+' ? '-' : '+';
    });
    //update all other more text to -
    $mores.not(this).text('+');
});

Demo: Fiddle

score 1 · Answer 3 · answered Dec 04 '13 at 16:24

1

Try:

$('.more').click(function(){
    var txt = $(this).text();
    if(txt == "+"){        
        $('.more').text("+");
        $(this).text("-");
    }
    else{
        $(this).text("+");
    }
});

DEMO here.

answered Dec 04 '13 at 16:24

codingrose

15,563
11
39
58

Bootstrap Toggle text change on multiple elements

3 Answers3