CODEWITHSUNDEEP
jquerytextonclick
Koala7
Koala7

Reputation: 1404

Change color text on click

I want the text Collapsible Group Item #1 turn into red color when i click over and the div collapses, which is the best method?

Here my case

http://jsfiddle.net/STqCF/66/

Upvotes: 2

Views: 894

Answers (2)

wirey00
wirey00

Reputation: 33661

You can use the .css method with a callback toggle the color

$('.accordion').collapse();

$('.accordion').on('show hide', function(e){
    var $sib = $(e.target).siblings('.accordion-heading');
    $sib.css('color','red').find('.accordion-toggle i').toggleClass('icon-arrow-down icon-arrow-up', 200);
    $sib.find('a.accordion-toggle').css('color',function(){
        return $(e.target).hasClass('in') ? 'red':'#08C';
    });
});

http://jsfiddle.net/STqCF/82/

EDIT:

To add font-weight bold also, just do the same thing and chain another .css method

$('.accordion').on('show hide', function(e){
    var $sib = $(e.target).siblings('.accordion-heading');
    $sib.css('color','red').find('.accordion-toggle i').toggleClass('icon-arrow-down icon-arrow-up', 200);
    $sib.find('a.accordion-toggle').css('color',function(){
        return $(e.target).hasClass('in') ? 'red':'#08C';
    }).css('font-weight',function(){
        return $(e.target).hasClass('in') ? 'bold':'';
    });
});

Though the better way would be to do it with a css class.. and toggle that class

$('.accordion').on('show hide', function(e) {
    var $sib = $(e.target).siblings('.accordion-heading');
    $sib.css('color', 'red').find('.accordion-toggle i').toggleClass('icon-arrow-down icon-arrow-up', 200);
    $sib.find('a.accordion-toggle').toggleClass('aCollapsed', $(e.target).hasClass('in'));
});​

http://jsfiddle.net/STqCF/112/

Upvotes: 2

Nate
Nate

Reputation: 4948

Here's another solution that suits my style a little bit better.

I had to try to interpret your question a little bit - please forgive me if I've misunderstood exactly what you're trying to do.

This adds is-off classes to headings that are not expanded and an is-on class to the one heading that is expanded.

http://jsfiddle.net/STqCF/111/

// Cache our jQuery objects so we don't have to fetch them repeatedly
var $accordion = $('.accordion'),
    $accordionHeadings = $accordion.find('.accordion-heading');

// Collapse the accordion initially
$accordion.collapse();

$accordion.on('show hide', function(e){
    $(e.target).siblings('.accordion-heading').find('.accordion-toggle i').toggleClass('icon-arrow-down icon-arrow-up', 200);
});

// Bind an event to give an is-on state to the current headline and an is-off state to all other headlines
$('.accordion').on('show', function (e) {
    var $target = $(e.target);

    // Reset the class states - remove all is-ons and add is-offs
    $accordionHeadings.removeClass('is-on')
    $accordionHeadings.addClass('is-off');

    // For only the current item, add the is-on class and remove is-off
    $target.siblings('.accordion-heading')
        .addClass('is-on')
        .removeClass('is-off');
});

​

Upvotes: 0

Related Questions