Solved

Change icon colors based off of two methods of functionality.

Posted on 2014-03-16
4
165 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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
How can I   ajax html table  rows? 20 62
jQuery Syntax 2 47
How to hide the rows in Table when the value is empty ? 4 16
Jquery get each value 2 14
I have answered several questions lately that were solved utilizing the power of jQuery's AJAX functions, so I thought I would write an article demonstrating the ease of use. Why should I use jQuery as opposed to regular JavaScript? Now I know…
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

911 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

20 Experts available now in Live!

Get 1:1 Help Now