CODEWITHSUNDEEP
javascriptjqueryhtmlcss
glln
glln

Reputation: 543

Switching a class on the event of a slideUp() of div

I've written this function that opens divs, revealing their text when you click on the the title above it. Opening one div will close any other open divs in the section.

What I want to happen is when the div is open, the title changes colour and then changes back when it's closed. This, I can do, but what I just can't seem to get my head around is getting it to change back if I open another div.

Here is my function: 

$(function() {
        /* Expand/Collapse Features */
        $('.feature-title').click(function () {
        $(this).find("i.fa-plus").toggleClass("fa-minus"); /* switches plus to minus */
        $(this).find("a.notActive").toggleClass("active"); /* Changes title colour */
        $(this).next('div').slideToggle(); /* Expand/Collapse */

        $(this).parent().siblings().children().next().slideUp(); /* Closes open feauture */
        return false;
        });  
    });

I'm not an expert at JS by any means so this would be a great learning curve for me.

Check it out here http://jsfiddle.net/pkL5p8uj/

Any help is much appreciated. Thanks.

Upvotes: 0

Views: 78

Answers (4)

Pete
Pete

Reputation: 58462

You need to do something like this:

$(function () {
    /* Expand/Collapse Features */
    $('.feature-title').click(function (e) {
        e.preventDefault(); // use proper jquery syntax instead of retuning false at the end.
        var title = $(this); // cache $(this) for betterr performance as you are using it more than once
        title.find("i.fa-plus").toggleClass("fa-minus"); /* switches plus to minus */
        title.find("a.notActive").toggleClass("active"); /* Changes title colour */
        title.next('div').slideToggle(); /* Expand/Collapse */

        title.parent().siblings().children().next().slideUp('slow', function () {
            var newTitle = $(this).parent();
            newTitle.find("i.fa-plus").removeClass("fa-minus"); /* only remove the class from the title closing */
            newTitle.find("a.notActive").removeClass("active"); /* only change the colour of the title closing */

        }); /* Closes open feauture */
    });
});

Example

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1075219

You can remove the active class before adding it to the new title, e.g.:

$(function() {
    /* Expand/Collapse Features */
    $('.feature-title').click(function() {
        var targetTitle;                                                // <= NEW
        $(this).find("i.fa-plus").toggleClass("fa-minus"); /* switches plus to minus */
        targetTitle = $(this).find("a.notActive");                      // <= NEW
        $("a.notActive.active").not(targetTitle).removeClass("active"); // <= NEW
        targetTitle.toggleClass("active"); /* Changes title colour */   // <= CHANGED
        $(this).next('div').slideToggle(); /* Expand/Collapse */

        $(this).parent().siblings().children().next().slideUp(); /* Closes open feauture */
        return false;
    });
});

Live Snippet:

$(function() {
    /* Expand/Collapse Features */
    $('.feature-title').click(function() {
        var targetTitle;
        $(this).find("i.fa-plus").toggleClass("fa-minus"); /* switches plus to minus */
        targetTitle = $(this).find("a.notActive");
        $("a.notActive.active").not(targetTitle).removeClass("active");
        targetTitle.toggleClass("active"); /* Changes title colour */
        $(this).next('div').slideToggle(); /* Expand/Collapse */

        $(this).parent().siblings().children().next().slideUp(); /* Closes open feauture */
        return false;
    });
});
.feature-item { padding:20px 10px 20px 10px;border-bottom:1px solid #B3A89D; text-align:left; } 
.feature-list { margin-top:0px; }
.feature-plus { padding-right:30px; }
.feature-text { display:none;padding-top:10px;padding-left:44px; }
.feature-item a { color:#000000; text-decoration:none; cursor:pointer; } 
.notActive { color:#000000 !important; }
.active { color:#D80003 !important; }
.feature-title { cursor:pointer; }
<div class="col-lg-6 col-lg-offset-4">
                    	<div class="feature-list">
  							<div class="feature-item">
    							<div class="feature-title" href="#one"><a href="#one" data-target="one" class="notActive"><span class="feature-plus"><i class="fa fa-minus"></i></span> TRENDING POLITICIANS</a></div>
    							<div class="feature-text" id="item1">Tem faccullici bla consequati undame voluptat. Mi, omnim ratiusdae iducia volupta illabor turione.</div>
  							</div>
  							<div class="feature-item">
    							<div class="feature-title"><a href="#two" data-target="two" class="notActive"><span class="feature-plus"><i class="fa fa-plus"></i></span> TWITTER TRENDING PARTIES</a></div>
    							<div class="feature-text">The political parties of UK which are trending currently in Twitter are being shown.</div>
  							</div>
  							<div class="feature-item">
    							<div class="feature-title"><a href="#three" data-target="three" class="notActive"><span class="feature-plus"><i class="fa fa-plus"></i></span> TWITTER TRENDING TOPICS</a></div>
    							<div class="feature-text">Tem faccullici bla consequati undame voluptat. Mi, omnim ratiusdae iducia volupta illabor turione.</div>
  							</div>
  							<div class="feature-item">
    							<div class="feature-title"><a href="#four" data-target="four" class="notActive"><span class="feature-plus"><i class="fa fa-plus"></i></span> FAVOURITES</a></div>
    							<div class="feature-text">Tem faccullici bla consequati undame voluptat. Mi, omnim ratiusdae iducia volupta illabor turione.</div>
  							</div>
  							<div class="feature-item">
    							<div class="feature-title"><a href="#five" data-target="five" class="notActive"><span class="feature-plus"><i class="fa fa-plus"></i></span> TWEETMAP</a></div>
    							<div class="feature-text">Tem faccullici bla consequati undame voluptat. Mi, omnim ratiusdae iducia volupta illabor turione.</div>
  							</div>
  							<div class="feature-item">
   			 					<div class="feature-title"><a href="#six" data-target="six" class="notActive"><span class="feature-plus"><i class="fa fa-plus"></i></span> COMPARE</a></div>
    							<div class="feature-text">Tem faccullici bla consequati undame voluptat. Mi, omnim ratiusdae iducia volupta illabor turione.</div>
  							</div>
  							<div class="feature-item">
    							<div class="feature-title"><a href="#seven" data-target="seven" class="notActive"><span class="feature-plus"><i class="fa fa-plus"></i></span> TOPIC ASSOCIATION</a></div>
    							<div class="feature-text">Tem faccullici bla consequati undame voluptat. Mi, omnim ratiusdae iducia volupta illabor turione.</div>
  							</div>                        
            		</div>
                </div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Upvotes: 2

JuaRoAl
JuaRoAl

Reputation: 201

$(function() {
        /* Expand/Collapse Features */
        $('.feature-title').click(function () {
        $(this).find("i.fa-plus").toggleClass("fa-minus"); /* switches plus to minus */
        $(".active").addClass("notActive").removeClass("active")    
        $(this).find("a.notActive").toggleClass("active"); /* Changes title colour */
        $(this).next('div').slideToggle(); /* Expand/Collapse */

        $(this).parent().siblings().children().next().slideUp(); /* Closes open feauture */
        return false;
        });

});

Upvotes: 0

Omid Kamangar
Omid Kamangar

Reputation: 5788

A quick (and dirty) solution is to find all a.notActive elements and remove the active class from them:

$(function() {
            /* Expand/Collapse Features */
            $('.feature-title').click(function () {
            $(this).find("i.fa-plus").toggleClass("fa-minus"); /* switches plus to minus */


            $('a.notActive').removeClass('active'); // This is what you need


            $(this).find("a.notActive").toggleClass("active"); /* Changes title colour */
            $(this).next('div').slideToggle(); /* Expand/Collapse */

            $(this).parent().siblings().children().next().slideUp(); /* Closes open feauture */
            return false;
            });  
});

Here is a working example.

Upvotes: 0

Related Questions