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>

You could check the current display to know if that element should be set to show() or hide() — NewToJS
– NewToJS, Commented May 17, 2017 at 11:43
The first if-statement works fine if I choose the color attribut (so it changes the text-color of the button), but not for the background-color attribut. I can't figure out why. It's the same with the function show. I set all buttons to display but it doesn't overwrite the before set hide attribute. — SurfinBird
– SurfinBird, Commented May 17, 2017 at 11:54
Possible duplicate of Overwriting CSS : Display none property with jquery — Adam
– Adam, Commented May 17, 2017 at 11:56

tiomno · Accepted Answer · 2017-05-17 11:49:53Z

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>

Lieutenant Jim Dangle · Accepted Answer · 2017-05-17 11:49:16Z

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>

Collectives™ on Stack Overflow

how to overwrite css with jquery

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related