CODEWITHSUNDEEP
jqueryhtmlcss
Dymond
Dymond

Reputation: 2277

change background color on active class

I have 2 clickeable classes that open two different divs.

Im trying to make so the active class keeps the hovering background as long its open.

tried a span but that didn't do the trick. Any tips ? I created a fiddle for show http://jsfiddle.net/Qskxa/12/

Jquery code

jQuery(document).ready(function() {
    jQuery('.toggle_hide').hide();

    jQuery("#artistsbox li span").css('cursor', 'pointer').click(function() {
        var $this = $(this);
        $this.next("div").fadeToggle(200);
        $('.toggle_hide').not($this.next("div")).fadeOut(800);
    });
});

Upvotes: 1

Views: 2386

Answers (4)

Rohit Agrawal
Rohit Agrawal

Reputation: 5490

Try this - http://jsfiddle.net/Qskxa/16/

jQuery(document).ready(function() {
  jQuery('.toggle_hide').hide();

  jQuery("#artistsbox li span").css('cursor', 'pointer').click(function() {
    var $this = $(this);
    var hasClass = $this.hasClass('active');
    $("#artistsbox li span").removeClass('active');
    if(!hasClass) $this.addClass('active');
    $this.next("div").fadeToggle(200);
    $('.toggle_hide').not($this.next("div")).fadeOut(800);
  });
});

*Note - change the css part as below 

#artistsbox li span:hover, #artistsbox li span.active{
   background-color:#250109;
   -webkit-transition: background 0.1s linear;
   -moz-transition: background 0.1s linear;
   -ms-transition: background 0.1s linear;
   -o-transition: background 0.1s linear;
   transition: background 0.1s linear;
}

Upvotes: 1

PraJen
PraJen

Reputation: 606

 http://jsfiddle.net/Praveen16oct90/Qskxa/15/

Note that i ve given id for each span for u to understand.

 jQuery(document).ready(function() {
jQuery('.toggle_hide').hide();

jQuery("#d1").css('cursor', 'pointer').click(function() {
    var $this = $(this);
    $this.css("background-color","#250109");
     $("#d2").css("background-color"," #ffffec");
    $this.next("div").fadeToggle(200);
    $('.toggle_hide').not($this.next("div")).fadeOut(800);
});

jQuery("#d2").css('cursor', 'pointer').click(function() {
    var $this = $(this);
    $this.css("background-color","#250109");
    $("#d1").css("background-color"," #ffffec");
    $this.next("div").fadeToggle(200);
    $('.toggle_hide').not($this.next("div")).fadeOut(800);
});

});

Upvotes: 1

Viktor S.
Viktor S.

Reputation: 12815

Simply create new css class active:

#artistsbox li span.active,
#artistsbox li span:hover{
background-color:#250109;
   -webkit-transition: background 0.1s linear;
        -moz-transition: background 0.1s linear;
        -ms-transition: background 0.1s linear;
        -o-transition: background 0.1s linear;
        transition: background 0.1s linear;

}

And update your click function so it will place that class on clicked element:

jQuery(document).ready(function() {
    jQuery('.toggle_hide').hide();

    jQuery("#artistsbox li span").css('cursor', 'pointer').click(function() {
        var $this = $(this);        
        $("#artistsbox li span").removeClass("active");//remove active class from any other element that could be clicked previously
        $this.addClass("active");
        $this.next("div").fadeToggle(200);
        $('.toggle_hide').not($this.next("div")).fadeOut(800);
    });
});

Demo

Upvotes: 1

mrks
mrks

Reputation: 8343

Try this (http://jsfiddle.net/Qskxa/14/):

jQuery(document).ready(function() {
    jQuery('.toggle_hide').hide();

    jQuery("#artistsbox li span").css('cursor', 'pointer').click(function() {
        $('#artistsbox li span.active').removeClass('active');
        var $this = $(this);
        if($this.next("div").is(":hidden()")) $this.addClass('active');
        $this.next("div").fadeToggle(200);
        $('.toggle_hide').not($this.next("div")).fadeOut(800);
    });
});

Note that I changed the CSS and added the active class.

Upvotes: 3

Related Questions