Kris Jones Kris Jones - 3 months ago 7
jQuery Question

Change css two times by clicking two separate buttons?

I have an interface that you can press edit to bring up borders and change the background color of other divs. The edit button gets replaced by cancel and save buttons. I want the borders and background to change on clicking edit and revert to normal on clicking save or cancel.

I am able to make the divs change when clicking edit, but I can't make them change back on clicking cancel or save. I'm using the exact same Jquery function for both.

//show lines on clicking edit
$(".editbutton").click(function() {
$(this).parent().find(".material_input").css("border-bottom", "1px solid #ccc").css("background-color", "#fafafa");

//hide lines on clicking save or cancel
$(".label-container button").click(function() {
$(this).parent().find(".material_input").css("background-color", "#fff");

I know that my second one doesn't include the border. I'm just trying to get the background back to white first.

Edit: It looks like there's a problem with the second function accessing the DOM because I can do this easily in Codepen. If someone can help me straighten this out that'll be great.

Here's the DOM for the relevant classes:

.parent > .editbutton

.parent > .button-wrap > .label-container

.parent > .section > .fields > .material_input


Based on the updated question, it seems changing $(this).parent() to $(this).parents('.parent') inside the click handler for save or cancel button should solve this.