CODEWITHSUNDEEP
jquery
brunodd
brunodd

Reputation: 2584

If div is visible then toggle icon

How to toggle the icon class from fa-chevron-down to fa-chevron-up on link if the toggle-project-stages div is visible?

jsFiddle

$(".toggle-project-stages").hide();

$(".toggle-project-status-downArrow").click(function(e){
    e.preventDefault();
    var toggleDiv = $(this).parent().prev('.panel-heading').find(".toggle-project-stages").toggle(200);

    $(".toggle-project-stages").not(toggleDiv).slideUp(200);
});

Upvotes: 2

Views: 306

Answers (4)

user38156
user38156

Reputation: 87

$(".toggle-project-stages").hide();

$(".toggle-project-status-downArrow").click(function (e) {
    e.preventDefault();
    var toggleDiv = $(this).parent().prev('.panel-heading').find(".toggle-project-stages").toggle(200);
    $(".toggle-project-stages").not(toggleDiv).slideUp(200);

    var $i = $('i', this).toggleClass('fa-chevron-down fa-chevron-up')
    $('.toggle-project-status-downArrow i').not($i).removeClass('fa-chevron-up').addClass('fa-chevron-down')
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="panel-dashboard">
    <div class="panel-heading">
        <div class="toggle-project-stages">
            <p>This is what I want to show!</p>
        </div>
    </div>
    
    <div class="toggle-project-status">
        <a href="#" class="toggle-project-status-downArrow">Show div <i class="fa fa-chevron-down"></i></a>
    </div>
</div>

<br/><br/>

<div class="panel-dashboard">
    <div class="panel-heading">
        <div class="toggle-project-stages">
            <p>This is what I want to show!</p>
        </div>
    </div>
    
    <div class="toggle-project-status">
        <a href="#" class="toggle-project-status-downArrow">Show div <i class="fa fa-chevron-down"></i></a>
    </div>
</div>

Upvotes: 0

Mansukh Khandhar
Mansukh Khandhar

Reputation: 2582

$(".toggle-project-stages").hide();

$(".toggle-project-status-downArrow").click(function(e){
    e.preventDefault();
    var toggleDiv = $(this).parent().prev('.panel-heading').find(".toggle-project-stages").toggle(200);
    if( $(this).children().hasClass( "fa-chevron-down" )){
        $(this).children().removeClass('fa-chevron-down').addClass('fa-chevron-up');    
    }
    else{
        $(this).children().removeClass('fa-chevron-up').addClass('fa-chevron-down');    
        
    }
    
   
    
    $(".toggle-project-stages").not(toggleDiv).slideUp(200);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="panel-dashboard">
    <div class="panel-heading">
        <div class="toggle-project-stages">
            <p>This is what I want to show!</p>
        </div>
    </div>
    
    <div class="toggle-project-status">
        <a href="#" class="toggle-project-status-downArrow">Show div <i class="fa fa-chevron-down"></i></a>
    </div>
</div>

<br/><br/>

<div class="panel-dashboard">
    <div class="panel-heading">
        <div class="toggle-project-stages">
            <p>This is what I want to show!</p>
        </div>
    </div>
    
    <div class="toggle-project-status">
        <a href="#" class="toggle-project-status-downArrow">Show div <i class="fa fa-chevron-down"></i></a>
    </div>
</div>

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388436

You can use toggleClass()

$(".toggle-project-stages").hide();

$(".toggle-project-status-downArrow").click(function (e) {
    e.preventDefault();
    var toggleDiv = $(this).parent().prev('.panel-heading').find(".toggle-project-stages").toggle(200);


    $(".toggle-project-stages").not(toggleDiv).slideUp(200);
    var $i = $('i', this).toggleClass('fa-chevron-down fa-chevron-up')
    $('.toggle-project-status-downArrow i').not($i).removeClass('fa-chevron-up').addClass('fa-chevron-down')
});

Demo: Fiddle

Upvotes: 3

Rory McCrossan
Rory McCrossan

Reputation: 337714

Within the callback of toggle() you can use toggleClass to remove the chevron-down and chevron-up. Try this:

$(".toggle-project-status-downArrow").click(function (e) {
    e.preventDefault();
    var $el = $(this);
    var toggleDiv = $el.closest('div').prev('.panel-heading').find(".toggle-project-stages").stop(true).toggle(200, function() {
        $el.find('i').toggleClass('fa-chevron-down fa-chevron-up');
    });
    $(".toggle-project-stages").not(toggleDiv).stop(true).slideUp(200);
});

Example fiddle

Upvotes: 0

Related Questions