11

I have tried this solution:

Twitter bootstrap: adding a class to the open accordion title

But to no avail, can someone tell me what I'm doing wrong here?

This is the accordion: 

<div class="accordion" id="accordion">
    <div class="accordion-group">
        <div class="accordion-heading">
            <div class="row-fluid">
                <div class="span5">
                    <img src="img/smartlist/user-icon.png" class="user"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion"
                    href="#collapseOne">Austin Wang</a>

                </div>
                <div class="span7">
                    <img class="envelope" src="img/smartlist/envelope.png"> <a href="#">Seller Drip</a>

                    <img class="new" src="img/smartlist/new-icon.png"> <a href="#">New</a>

                    <img class="messages" src="img/smartlist/bubbles.png"> <a href="#">8 Days</a>

                    <img class="accordion-action pull-right" src="img/smartlist/plus-box.png"
                    data-toggle="collapse" data-target="#collapseOne">
                </div>
            </div>
        </div>
        <div id="collapseOne" class="accordion-body collapse">
            <div class="accordion-inner">
                <div class="row-fluid">
                    <div class="span12 top-links"> <a href="#" class="active">Email Template</a>
 <a href="#">Home Price Evaluation Offer</a>

                    </div>
                </div>
                <div class="arrow-up"></div>
                <div class="row-fluid grey-body">
                    <div class="span12">
                        <label>Subject</label>
                        <input type="text" class="text-field">
                        <label>Body</label>
                        <textarea rows="10"></textarea>
                        <div class="buttons">
                            <div class="form">
                                <button type="submit" class="send-button">Send</button> <a href="#" class="call">Call</a>
 <a href="#" class="skip">Skip</a>

                            </div>
                            <div class="pull-right radio">
                                <input type="radio">
                                <label>BCC Me</label>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

And then my JS at the bottom:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/less-1.3.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.js" type="text/javascript"></script>
<script type="text/javascript">
$(".collapse").collapse()   
</script>
<script type="text/javascript">
$(function() {

$('.accordion-body').on('show', function (e) {
     $(e.target).prev('.accordion-heading').find('.accordion-toggle').addClass('active');
});

$('.accordion-body').on('hide', function (e) {
    $(this).find('.accordion-toggle').not($(e.target)).removeClass('active');
});

});
</script>

I really don't know much about JS, so any help is appreciated!

Akash Shrivastava
  • 1,365
  • 8
  • 16
imcconnell
  • 844
  • 1
  • 6
  • 17

3 Answers3

1

If you see in that fiddle, he has defined one css rule for 

.active {
    background-color: Blue;   
}

In your case, you are successfully applying the css class to the element, but the class is not defined. (Or you haven't posted it in the question)

Salman
  • 9,299
  • 6
  • 40
  • 73
  • I'm not sure what you mean-- when I look at the code in the inspector, the active class is never applied to begin with, so it wouldn't matter what CSS i assign to it? – imcconnell Feb 27 '13 at 13:00
  • I see, I tried with the code you posted, and the class being assigned properly. May be you could `console.log( $(e.target).prev('.accordion-heading').find('.accordion-toggle') )` and see if it finds the element. – Salman Feb 27 '13 at 13:03
  • See [here](http://jsfiddle.net/8CcuK/), check in inspector, active class is applied properly. and I just added one `.active` rule [here](http://jsfiddle.net/8CcuK/1/) and its getting background color. – Salman Feb 27 '13 at 13:10
  • Yes, that does work there-- how would I modify the code to add the .active to the .accordion-heading element? – imcconnell Feb 27 '13 at 13:17
  • Actually, the only reason that .active styling works is because other things have an .active class on their own. The javascript isn't what's adding it. The element that has a blue background isn't an .accordion-toggle class or link. – imcconnell Feb 27 '13 at 13:20
  • Now I am confused, where exactly you want the active class? I can't seem to understand your problem. You could even use `$(this).prev().addClass('active');` in `show` and `$(this).prev().removeClass('active');` in `hide`. – Salman Feb 27 '13 at 13:52
  • Sorry! I want the active class on the .accordion-heading element. – imcconnell Feb 27 '13 at 14:09
  • `$(this).prev().addClass('active');` adds the `active` class on `accordion-heading`. Try it – Salman Feb 27 '13 at 14:12
  • Like this? $(".collapse").collapse() $(function() { $('.accordion-body').on('show', function (e) { $(this).prev().addClass('active'); }); $('.accordion-body').on('hide', function (e) { $(this).prev().removeClass('active'); }); }); – imcconnell Feb 27 '13 at 14:22
  • Yes, Did you try it? whats the issue you faced? – Salman Feb 27 '13 at 15:22
  • It still wasn't adding the class to accordion heading -- I genuinely have no idea why. – imcconnell Feb 27 '13 at 15:36
  • Try to debug it man, `console.log()` on every step, on every selector. and you shall find what the problem is.. Good Luck. :) – Salman Feb 27 '13 at 15:44
0

This works for me:

$('.accordion-body').on('show',
  function(e){
    $(e.currentTarget).parent().find('.accordion-heading').addClass('active') 
  }
)

$('.accordion-body').on('hide',
  function(e){
    $(e.currentTarget).parent().find('.accordion-heading').removeClass('active') 
  }
)
Andreyy
  • 511
  • 2
  • 11
  • Hello - this doesn't work for me -- is it to do with where I'm placing it in the code? – imcconnell Feb 27 '13 at 13:02
  • This code has to be run after DOMElements are ready, otherwise $('.accordion-body') will find nothing and nothing will happen. [Executing when dom is ready](http://api.jquery.com/ready/) See the examples on this page. – Andreyy Feb 28 '13 at 10:21
0

To achieve expected result, use below option
1. Add on click event to .accordion-toggle
1. Remove active class from all elements with class - accordion-toggle
2. Check aria-expanded flag, if it is true then add active to the clicked element 

    $(function() {
       $("a").on('click',function(){
         $('.accordion-toggle ').removeClass('active')

         if($(this).attr('aria-expanded')!== false){
             console.log('add');
                        $(this).addClass('active')
           }
        })
});

code sample - https://codepen.io/nagasai/pen/pVNxWw

Naga Sai A
  • 10,771
  • 1
  • 21
  • 40