Q: JQuery Text Replacement on Button Click I'm trying to create 4 boxes that, upon clicking a button at the bottom of each box, will create an overlay on top of that box. I've never used javascript/jquery before, so my code is a bit basic.
Question: I need the text in each button to change to "Less Information" when the overlay is shown, but change back to "More Information" when the overlay is removed (either by clicking that button or opening up one of the other overlays).
PS: If you hate my code and want to simplify it (it's very repetitive, I'm not sure how to make it more advanced and cool), please go ahead (explaining what you did would be super helpful as well).
My HTML code:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Country Profiles</title>
<link href="Includes/Country_Profiles.css" rel="stylesheet" type="text/css">
<link href="Includes/About_Us.css" rel="stylesheet" type="text/css">
<script src="Includes/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
   $("#button_food").click(function(){
       $("#food_facts").slideToggle(500);
       $("#water_facts").slideUp(500);
       $("#health_facts").slideUp(500);
       $("#care_facts").slideUp(500);
       });
   $("#button_water").click(function(){
       $("#water_facts").slideToggle(500);
       $("#health_facts").slideUp(500);
       $("#food_facts").slideUp(500);
       $("#care_facts").slideUp(500);
       });
   $("#button_health").click(function(){
       $("#health_facts").slideToggle(500);
       $("#water_facts").slideUp(500);
       $("#food_facts").slideUp(500);
       $("#care_facts").slideUp(500);
       });
   $("#button_care").click(function(){
       $("#care_facts").slideToggle(500);
       $("#water_facts").slideUp(500);
       $("#food_facts").slideUp(500);
       $("#health_facts").slideUp(500);
       });
});
</script>
</head>

<body>
<div class="country_container">
    <div class="h1">Country</div>
    <div class="info">Info Paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum blandit fringilla. Sed sit amet ante eu nisl porta accumsan. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec a consequat ipsum. Morbi sed justo porttitor, rhoncus dolor vel, ultrices odio. Curabitur lobortis vitae nisi dignissim malesuada. Praesent vitae elementum tellus, in pretium nunc. Fusce libero neque, dignissim eget magna et, vulputate ullamcorper urna. Integer a leo sed leo fringilla pulvinar. Sed fringilla mattis mauris quis placerat. Ut rhoncus lectus massa, a sagittis sapien ullamcorper ut. In hac habitasse platea dictumst. Mauris sagittis gravida justo, vitae laoreet mi posuere bibendum.</div>
    <div class="pillar_blocks">
        <div class="block" id="food">
            <div class="more_facts" id="food_facts"><h3>Food - More Facts</h3><p><ul><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li></ul></div>
            <h3>Food</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum blandit fringilla. Sed sit amet ante eu nisl porta accumsan. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec a consequat ipsum. Morbi sed justo porttitor, rhoncus dolor vel, ultrices odio. Curabitur lobortis vitae nisi dignissim malesuada.</p>
            <div class="button" id="button_food">More Information</div>
        </div>
        <div class="block" id="water">
            <div class="more_facts" id="water_facts"><h3>Water - More Facts</h3><p><ul><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li></ul></div>
            <h3>Water</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum blandit fringilla. Sed sit amet ante eu nisl porta accumsan. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec a consequat ipsum. Morbi sed justo porttitor, rhoncus dolor vel, ultrices odio. Curabitur lobortis vitae nisi dignissim malesuada.</p>
            <div class="button" id="button_water">More Information</div>
        </div>
        <!--<div class="block" id="health">
            <div class="more_facts" id="health_facts"><h3>Health - More Facts</h3><p><ul><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li></ul></div>
            <h3>Health</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum blandit fringilla. Sed sit amet ante eu nisl porta accumsan. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec a consequat ipsum. Morbi sed justo porttitor, rhoncus dolor vel, ultrices odio. Curabitur lobortis vitae nisi dignissim malesuada.</p>
            <div class="button" id="button_health">More Information</div>
        </div>-->
        <div class="block" id="care">
            <div class="more_facts" id="care_facts"><h3>Care - More Facts</h3><p><ul><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li><li>1</li></ul></div>
            <h3>Care</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec interdum blandit fringilla. Sed sit amet ante eu nisl porta accumsan. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec a consequat ipsum. Morbi sed justo porttitor, rhoncus dolor vel, ultrices odio. Curabitur lobortis vitae nisi dignissim malesuada.</p>
            <div class="button" id="button_care">More Information</div>

        </div>
    </div>
</div>
</body>
</html>

My CSS:
@charset "UTF-8";

.country_container {
    width: 800px;
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 0px;
    padding-right: 20px;
    padding-top: 40px;
    padding-bottom: 20px;
    padding-left: 20px;
    margin-top: 20px;
}
.h1 {
    font-size: 50px;
    font-weight: 700;
    font-variant: small-caps;
    font-family: "FreightSans Pro Black", "Arial Black", sans-serif;
    margin-top: 2px;
    margin-bottom: 10px;
}
.info {
    font-size: 16px;
    font-weight: normal;
    font-variant: normal;
    line-height: 18px;
    font-family: "FreightSans Pro Book", Arial, sans-serif;
    padding-left: 4px;
}
.pillar_blocks {
    width: 840px;
    height: 820px;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    clear: both;
    position: relative;
    left: -28px;
}
.block {
    width: 360px;
    height: 360px;
    overflow: hidden;
    float: left;
    position: relative;
    margin-top: 19px;
    padding-top: 12px;
    padding-left: 20px;
    padding-right: 20px;
    border-radius: 3px;
    margin-left: 19px;
}
.block h3 {
    font-family:"FreightSans Pro Black", "Arial Black", sans-serif;
    font-size: 30px;
    font-weight: 700;
    font-variant: small-caps;
    text-align: center;
    color: #000;
}
.block p {
    font-family:"FreightSans Pro Book", Arial, sans-serif;
    font-size: 16px;
    font-weight: normal;
    font-variant: normal;
    text-align: left;
    line-height: 18px;
    margin-top: 10px;
}
#food {
    background-color: #EF7314;
}
#water {
    background-color: #02a8c1;
}
#health {
    background-color: #ee3124;
}
#care {
    background-color: #80c342;
}
.more_facts {
    width: 400px;
    height: 372px;
    overflow: hidden;
    border-radius: 3px;
    display: none;
    margin-top: -12px;
    margin-left: -20px;
    margin-right: -20px;
    padding-top: 12px;
    padding-left: 20px;
    padding-right: 20px;
}
#food_facts {
    background-color: #EF7314;
}
#water_facts {
    background-color: #02a8c1;
}
#health_facts {
    background-color: #ee3124;
}
#care_facts {
    background-color: #80c342;
}
.button {
    width: 400px;
    height: 27px;
    margin-top: 0px;
    margin-right: -20px;
    margin-left: -20px;
    margin-bottom: 0px;
    position: absolute;
    bottom: 0px;
    text-align: center;
    font-size: 18px;
    font-family: "FreightSans Pro Medium", "Arial Bold", sans-serif;
    cursor: pointer;
    font-weight: 700;
    font-style: italic;
    padding-top: 7px;
}
#button_food {
    background-color: #EF7314;
}
#button_food:hover {
    background-color: #D76812;
}
#button_water {
    background-color: #02a8c1;
}
#button_water:hover {
    background-color: #0297AE;
}
#button_health {
    background-color: #ee3124;
}
#button_health:hover {
    background-color: #D62C20;
}
#button_care {
    background-color: #80c342;
}
#button_care:hover {
    background-color: #73B03B;
}


A: You can try below code:
$(".button").click(function(){
    if($(this).hasClass("selected")){
        $(this).siblings(".more_facts").slideUp(500);
        $(this).removeClass("selected");
        $(this).text("More Information");
    } else {
        $(".pillar_blocks").find(".selected").siblings(".more_facts").slideUp(500);
        $(".pillar_blocks").find(".selected").text("More Information");            
        $(".pillar_blocks").find(".selected").removeClass("selected");
        $(this).addClass("selected");
        $(this).siblings(".more_facts").slideDown(500);  
        $(this).text("Less Information");
    }
});

Check out this Fiddle..
