DISABLE ADBLOCK

ADBlock is blocking some content on the site

ADBlock errore

adding toggle span to twitter bootstrap collapse

StackOverflow https://stackoverflow.com/questions/14280642

Question

I'm using Twitter Bootstrap on a new site and I need to add a plus/minus to the toggler. The section is wrapped in an EE channel entries tag to loop through career entires and create an accordion list. My accordion code is as follows:

{if count == "1"}
<div class="accordion" id="my_accordion">
{/if}
    <div class="accordion-group">
        <div class="accordion-heading">
            <h2><a class="accordion-toggle" data-parent="#my_accordion" data-toggle="collapse" href="#collapse{count}">{title} <span class="pull-right">+</span></a></h2>
        </div>
        <div class="accordion-body collapse" id="collapse{count}">
            <div class="accordion-inner">
                {careers-summary}
                <p><a href="{page_uri}" class="btn btn-small">Learn More</a></p>
            </div>
        </div>
    </div>
{if count == total_results}
</div>
{/if}

The javascript I starte writing that doesn't seem to want to work is as follows (see new code below):

All I'm trying to do is get the plus sign to change to a minus and vice versa when the accordion is opened/closed. The more I look at the javascript I started, even if it did actually change the text as I'd like, it would not necessarily do so when I clicked on another accordion toggler. What's the best way to get this to work and have it flexible enough to work on multiple accordion togglers?

UPDATE I've made some changes to the javascript and used the events Twitter Bootstrap offers. I also removed the data-parent attribute so these act like collapsible togglers and not an accordion. The new code is as follows:

$('.accordion').on('hide', function () {
    $('.accordion-toggle span').html('+');     
})
$('.accordion').on('show', function () {
    $('.accordion-toggle span').html('-');     
})

This actually changes the text but it changes the plus/minus sign for every toggler not just the toggler you clicked. I could add a custom class to each span but I'm not sure how I would then target this in the javascript without having to create a show.hide function for each toggled. That seems inefficient and there must be an easier way to do this.

Solution

You should use the Bootstrap show and hide events like so instead of your click function above:

$(".accordion-body").on("show",function(event){
        $('span', $(this).prev()).text('-');
});
$(".accordion-body").on("hide",function(event){
        $('span', $(this).prev()).text('+');
});

JS Fiddle here.

OTHER TIPS

Simple solution worked for Bootstrap 3.

$('[data-toggle="collapse"]').click(function(e) {
    $(e.target).find('.icon-minus-sign, .icon-plus-sign').toggleClass("icon-minus-sign icon-plus-sign");
});

The following is for an accordion where only one panel will be open at a time (for Bootstrap 3)

1. CSS - only

#accordion2 .accordion-toggle span.glyphicon.glyphicon-collapse-up:before { 
content:"\e160" /* an up type icon */
}

#accordion2 .accordion-toggle.collapsed span.glyphicon.glyphicon-collapse-up:before { 
content:"\e159" /* a down type icon */
}

The collapsed class needs to be set in the HTML from the outset JS fiddle example

2. Javascript

Using Javascript to check for the class '.collapsed' on all the links with class '.accordion-toggle':

jQuery(document).ready(function ($) {
    $(document).on('click', '.accordion-toggle', function () {
        $(".accordion-toggle").each(function () {
            var iconSpan = $(this).find('.glyphicon');
            if ($(this).hasClass('collapsed')) {
                $(iconSpan).removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
            } else {
                $(iconSpan).removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
            }
        });
    });
});

Fiddle: http://jsfiddle.net/JungleEditor/bCk3f/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow