jQuery filter the displaying of divs issue

Question

I'm using jQuery to filter the display of divs, when i click on the name of a color i want it to display only the div that is coresponding to that color, for the "red" example, it works fine, but not the blue and the green one, first of all i want to know the problem that is occuring, then the best way to fix it.

Thank you very much.

  /* jQuery function*/
                  
                $(document).ready(function(){
                    $("#button_red").click(function(){
                        $("#green").fadeOut(200);
                        $("#blue").fadeOut(200);

                        $("#red").fadeIn(500);
                       
                    });

                   $("#button_blue").click(function(){ 
                        $("#red").fadeOut(200);
                        $("#green").fadeOut(200);
                
                        $("#blue").fadeIn(500);
                    });

                   $("#button_green").click(function(){
                        $("#red").fadeOut(200);
                        $("#blue").fadeOut(200);

                        $("#green").fadeIn(500);
                    });

                     
                });

    
#colors_container{
    background-color: white;
    width: 100%;
    height: 900px;

    
}

#colors_container #colors_buttons{
    width: 450px;
    height: 50px;
    margin: 20px auto 10px auto;
    background-color: purple;


}

#colors_container #colors_buttons a {
    text-decoration: none;
    float: left;
    margin-right: 30px;
    border : solid 2px red;
    padding: 10px 10px 10px 10px ; 
    color: white;
}

#colors_container #colors{
    width: 1060px;
    height: 800px;
    margin: 10px auto 10px auto;
    background-color: yellow;
    padding: 10px 10px 10px 10px;
}

#red , #blue , #green {
    width: 250px;
    height: 300px;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

#red{
    background-color: red;
}

#blue{
    background-color: blue;
}

#green{
    background-color: green;
}

                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
               
  

            <div id="colors_container">
                    <div id="colors_buttons">
                        
                        <a href="">ALL</a>
                        <a id="button_red" href="#">Red</a>
                        <a id="button_blue" href="#">Blue</a> 
                        <a id="button_green" href="#">Green</a> 
                     
                    </div>
                    
                    <div id="colors">

                       <div id="red"></div>
                       <div id="blue"></div>
                       <div id="red"></div>
                       <div id="green"></div>
                       
                    </div>
            </div>
 

Answer 1

Because you have duplicated IDs (refer to id="red") I suggest to transform your IDs to class. Moreover I suggest a reduced event handler because the anchor text and your class names are similar:

$('#colors_buttons a').on('click', function(e) {
   // get the button text (ALL, Red, Blue, Green), remove spaces and transform in lower case
    var currColor = this.textContent.trim().toLocaleLowerCase();
    // now in currColor  variable we have a string like red or blue or green
    // but this string corresponds to the class name of the divs....
    if (currColor == 'all') {
        $("#colors div").fadeIn(500);
    } else {
        // fade out all #colors divs not having such a class
        $('#colors :not(.' + currColor + '').fadeOut(200);
        // fade in the only one...
        $("#colors ." + currColor).fadeIn(500);
    }
})

#colors_container{
    background-color: white;
    width: 100%;
    height: 900px;


}

#colors_container #colors_buttons{
    width: 450px;
    height: 50px;
    margin: 20px auto 10px auto;
    background-color: purple;


}

#colors_container #colors_buttons a {
    text-decoration: none;
    float: left;
    margin-right: 30px;
    border : solid 2px red;
    padding: 10px 10px 10px 10px ;
    color: white;
}

#colors_container #colors{
    width: 1060px;
    height: 800px;
    margin: 10px auto 10px auto;
    background-color: yellow;
    padding: 10px 10px 10px 10px;
}

.red , .blue , .green {
    width: 250px;
    height: 300px;
    float: left;
    margin-right: 10px;
    margin-bottom: 10px;
}

.red{
    background-color: red;
}

.blue{
    background-color: blue;
}

.green{
    background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="colors_container">
    <div id="colors_buttons">
        <a href="">ALL</a>
        <a id="button_red" href="#">Red</a>
        <a id="button_blue" href="#">Blue</a>
        <a id="button_green" href="#">Green</a>
    </div>

    <div id="colors">
        <div class="red"></div>
        <div class="blue"></div>
        <div class="red"></div>
        <div class="green"></div>
    </div>
</div>