how to overwrite css with jquery

Question

I know this code is working, but how do I overwrite the css for .show (display: none) and the background-color? If I click a already selected button all buttons should be the default (blue) color and the all project should be shown. but the background-color and display: none. don't appear.

 $(".category_item").click(function() { var category = $(this).attr("id"); if ($(this).hasClass("selected")) { $("#design, #motiongraphic, #photography").css("background-color", "green"); $(".design, .motiongraphic, .photography").show(); } //changes category and background-color if (category === "design") { $(".motiongraphic, .photography").hide(); $("#motiongraphic, #photography").css("background-color", "#313b50").removeClass("selected"); $(".design").show(); $("#design").css("background-color", "#d96b6e").addClass("selected"); } if (category === "motiongraphic") { $(".design, .photography").hide(); $("#design, #photography").css("background-color", "#313b50").removeClass("selected"); $(".motiongraphic").show(); $("#motiongraphic").css("background-color", "#47beb4").addClass("selected"); } if (category === "photography") { $(".design, .motiongraphic").hide(); $("#design, #motiongraphic").css("background-color", "#313b50").removeClass("selected"); $(".photography").show(); $("#photography").css("background-color", "#8a6bbe").addClass("selected"); } }); 

 div#i_buttons button { padding: 15px; margin: 0 2% 6% 2%; text-align: center; text-decoration: none; font-family: "Open Sans", serif; font-style: italic; font-size: 16px; width: 170px; background-color: #313b50; color: #d9d9d9; border: none; border-radius: 8px; transition-duration: 0.2s; -webkit-transition-duration: 0.2s; } div#i_buttons button:hover { cursor: pointer; } div#i_buttons button#design:hover { background-color: #d96b6e !important; } div#i_buttons button#motiongraphic:hover { background-color: #47beb4 !important; } div#i_buttons button#photography:hover { background-color: #8a6bbe !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Buttons --> <div id="i_buttons"> <button type="button" class="category_item" id="design">3D design</button> <button type="button" class="category_item" id="motiongraphic">motion graphics</button> <button type="button" class="category_item" id="photography">photography</button> </div> <!-- Gallery --> <div id="i_container"> <div id="i_grid"> <div class="i_cell design"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/3Ddesign.jpg" alt="Project 01"></a> </div> <div class="i_cell design"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/3Ddesign.jpg" alt="Project 02"></a> </div> <div class="i_cell design"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/3Ddesign.jpg" alt="Project 03"></a> </div> <div class="i_cell motiongraphic"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/MotionGraphics.jpg" alt="Project 04"></a> </div> <div class="i_cell motiongraphic"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/MotionGraphics.jpg" alt="Project 05"></a> </div> <div class="i_cell motiongraphic"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/MotionGraphics.jpg" alt="Project 06"></a> </div> <div class="i_cell photography"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/Photography.jpg" alt="Project 07"></a> </div> <div class="i_cell photography"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/Photography.jpg" alt="Project 08"></a> </div> <div class="i_cell photography"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/Photography.jpg" alt="Project 09"></a> </div> </div> </div> 

Answer 1

Just add a return; in the line 7 of the js and fix the background color of the buttons. ;)

 $(".category_item").click(function() { var category = $(this).attr("id"); if ($(this).hasClass("selected")) { $("#design, #motiongraphic, #photography").css("background-color", "#313b50"); // <-- restore the original color $(".design, .motiongraphic, .photography").show(); return; // <-- need to return here so the below code doesn't run } //changes category and background-color if (category === "design") { $(".motiongraphic, .photography").hide(); $("#motiongraphic, #photography").css("background-color", "#313b50").removeClass("selected"); $(".design").show(); $("#design").css("background-color", "#d96b6e").addClass("selected"); } if (category === "motiongraphic") { $(".design, .photography").hide(); $("#design, #photography").css("background-color", "#313b50").removeClass("selected"); $(".motiongraphic").show(); $("#motiongraphic").css("background-color", "#47beb4").addClass("selected"); } if (category === "photography") { $(".design, .motiongraphic").hide(); $("#design, #motiongraphic").css("background-color", "#313b50").removeClass("selected"); $(".photography").show(); $("#photography").css("background-color", "#8a6bbe").addClass("selected"); } }); 

 div#i_buttons button { padding: 15px; margin: 0 2% 6% 2%; text-align: center; text-decoration: none; font-family: "Open Sans", serif; font-style: italic; font-size: 16px; width: 170px; background-color: #313b50; color: #d9d9d9; border: none; border-radius: 8px; transition-duration: 0.2s; -webkit-transition-duration: 0.2s; } div#i_buttons button:hover { cursor: pointer; } div#i_buttons button#design:hover { background-color: #d96b6e !important; } div#i_buttons button#motiongraphic:hover { background-color: #47beb4 !important; } div#i_buttons button#photography:hover { background-color: #8a6bbe !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Buttons --> <div id="i_buttons"> <button type="button" class="category_item" id="design">3D design</button> <button type="button" class="category_item" id="motiongraphic">motion graphics</button> <button type="button" class="category_item" id="photography">photography</button> </div> <!-- Gallery --> <div id="i_container"> <div id="i_grid"> <div class="i_cell design"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/3Ddesign.jpg" alt="Project 01"></a> </div> <div class="i_cell design"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/3Ddesign.jpg" alt="Project 02"></a> </div> <div class="i_cell design"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/3Ddesign.jpg" alt="Project 03"></a> </div> <div class="i_cell motiongraphic"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/MotionGraphics.jpg" alt="Project 04"></a> </div> <div class="i_cell motiongraphic"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/MotionGraphics.jpg" alt="Project 05"></a> </div> <div class="i_cell motiongraphic"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/MotionGraphics.jpg" alt="Project 06"></a> </div> <div class="i_cell photography"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/Photography.jpg" alt="Project 07"></a> </div> <div class="i_cell photography"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/Photography.jpg" alt="Project 08"></a> </div> <div class="i_cell photography"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/Photography.jpg" alt="Project 09"></a> </div> </div> </div> 

Answer 2

Try this.

 $(".category_item").click(function() { var category = $(this).attr("id"); //$('.category_item#'+category).show(); $(".category_item").removeClass('is-active'); $('.i_cell').hide(); $(this).addClass('is-active'); $('.'+category).show(); }); 

 div#i_buttons button { padding: 15px; margin: 0 2% 6% 2%; text-align: center; text-decoration: none; font-family: "Open Sans", serif; font-style: italic; font-size: 16px; width: 170px; background-color: #313b50; color: #d9d9d9; border: none; border-radius: 8px; transition-duration: 0.2s; -webkit-transition-duration: 0.2s; } div#i_buttons button:hover { cursor: pointer; } div#i_buttons button#design.is-active, div#i_buttons button#design:hover { background-color: #d96b6e !important; } div#i_buttons button#motiongraphic.is-active, div#i_buttons button#motiongraphic:hover { background-color: #47beb4 !important; } div#i_buttons button#photography.is-active, div#i_buttons button#photography:hover { background-color: #8a6bbe !important; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!-- Buttons --> <div id="i_buttons"> <button type="button" class="category_item" id="design">3D design</button> <button type="button" class="category_item" id="motiongraphic">motion graphics</button> <button type="button" class="category_item" id="photography">photography</button> </div> <!-- Gallery --> <div id="i_container"> <div id="i_grid"> <div class="i_cell design"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/3Ddesign.jpg" alt="Project 01"></a> </div> <div class="i_cell design"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/3Ddesign.jpg" alt="Project 02"></a> </div> <div class="i_cell design"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/3Ddesign.jpg" alt="Project 03"></a> </div> <div class="i_cell motiongraphic"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/MotionGraphics.jpg" alt="Project 04"></a> </div> <div class="i_cell motiongraphic"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/MotionGraphics.jpg" alt="Project 05"></a> </div> <div class="i_cell motiongraphic"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/MotionGraphics.jpg" alt="Project 06"></a> </div> <div class="i_cell photography"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/Photography.jpg" alt="Project 07"></a> </div> <div class="i_cell photography"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/Photography.jpg" alt="Project 08"></a> </div> <div class="i_cell photography"> <a target="_blank" href="content.html"> <div class="overlay"></div><img src="img/Photography.jpg" alt="Project 09"></a> </div> </div> </div>