Solved

Change icon colors based off of two methods of functionality.

Posted on 2014-03-16
4
166 Views
Last Modified: 2014-03-18
I'm trying to change the icon color to say "red" for two methods of functionality.

1. I have main heading delete options which should change the main heading color trash can to red as well as the subset trash cans and they should toggle on/off when clicking the main heading trash can.

2. The subset trash can icons should also toggle color but only on a individual basis. I know how to do this using jquery in other ways but I'm looking for a solution based off of the current code that's driving the functionality I already have. Just seeing if there's a condensed way of doing it than the if/else statement i would do.

Also, don't pay attention to the checkboxes. They should have no interaction on the page itself. I will have those hidden and they are only used in the actual delete process which I have working already.

http://jsfiddle.net/x3s42/

Thx!
0
Comment
Question by:brihol44
  • 2
4 Comments
 
LVL 15

Assisted Solution

by:Insoftservice
Insoftservice earned 50 total points
ID: 39933588
Just replace

$('.pull-right a').click(function() {
     var $checkbox = $(this).next("input")
    $checkbox.prop("checked",!$checkbox.prop('checked'))

 $(this).closest(".heading").next('div').find("input").prop("checked",$checkbox.prop('checked'));
          $(this).closest(".heading").next('div').find('div').toggleClass("checked", this.checked);

});

css

.checked {
    background-color: #ff0000;
}
Try and check whether it suits your criteria
0
 

Author Comment

by:brihol44
ID: 39935763
Sorry but it doesn't seem to work.
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 350 total points
ID: 39936835
Have a look at this. It seems to work fine:

http://jsfiddle.net/ChrisStanyon/x3s42/3/
0
 

Author Closing Comment

by:brihol44
ID: 39938682
Works awesome! Thx!
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
jQuery UI required not working in safari 9 34
Change text to radio button and calendar form 2 47
How can I echo a PHP variable in AJAX function? 7 54
Jquery keyup 4 17
PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

813 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now