JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container1">
    <div id="flowerBtn1" class="title_bar">+</div>
    <div id="flower1" class="">
        <img src="http://www.agnetonline.com/images/sunflower.jpg" height="100" width="100" alt="smaller image" />
    </div>
    <div id="flower11" class="hideME">
        <img src="http://www.insuremyflorist.co.uk/images/headers/flower-shop-insurance-home.jpg" height="100" width="300" alt="big image" />
    </div>
</div>
<div id="container2">
    <div id="flowerBtn2" class="title_bar">+</div>
    <div id="flower2" class="">
        <img src="http://www.agnetonline.com/images/sunflower.jpg" height="100" width="100" alt="smaller image" />
    </div>
    <div id="flower22" class="hideME">
        <img src="http://www.insuremyflorist.co.uk/images/headers/flower-shop-insurance-home.jpg" height="100" width="300" alt="big image" />
    </div>
</div>
<div id="container3">
    <div id="flowerBtn3" class="title_bar">+</div>
    <div id="flower3" class="">
        <img src="http://www.agnetonline.com/images/sunflower.jpg" height="100" width="100" alt="smaller image" />
    </div>
    <div id="flower33" class="hideME">
        <img src="http://www.insuremyflorist.co.uk/images/headers/flower-shop-insurance-home.jpg" height="100" width="300" alt="big image" />
    </div>
</div>

CSS

#container1, #container2, #container3 {
    float:left;
    margin-left:10px;
    border: 5px solid green;
    width:125px;
    height:125px;
}
.title_bar {
    border:solid 1px;
    width: 25px;
    height: 25px;
    float:right;
    cursor:pointer;
}
#flowerBtn1, #flowerBtn2, #flowerBtn3 {
}
.hideME {
    display:none;
}

JavaScript

$("#flowerBtn1").click(function () {
   $("#container2,#container3").slideToggle("fast");
    if ($(this).html() == "+") {
        $(this).html("-");
           $("#container1").animate({
            width: '375px'
        }, 500, 'swing'); //.css("width","375px");
        $("#flower1").addClass("hideME");
        $("#flower11").removeClass("hideME");
    } else {
        $(this).html("+");
       $("#container1").animate({
            width: '100px'
        }, 1000, 'swing'); //.css("width","375px");
        $("#flower1").removeClass("hideME");
        $("#flower11").addClass("hideME");
    }
});

$("#flowerBtn2").click(function () {
    $("#container1,#container3").slideToggle("fast");
    if ($(this).html() == "+") {
        $(this).html("-");
         $("#container2").animate({
            width: '375px'
        }, 500, 'swing'); //.css("width","375px");
        $("#flower2").addClass("hideME");
        $("#flower22").removeClass("hideME");
    } else {
        $(this).html("+");
       // $("#container1,#container3").show('slow'); //.fadeIn(500, 'linear');
        $("#container2").animate({
            width: '100px'
        }, 500, 'swing'); //.css("width","375px");
        $("#flower2").removeClass("hideME");
        $("#flower22").addClass("hideME");
    }
});

$("#flowerBtn3").click(function () {
     $("#container1,#container2").slideToggle("fast");
    if ($(this).html() == "+") {
        $(this).html("-");
       // $("#container1,#container2").fadeOut(500, 'linear');
        $("#container3").animate({
            width: '375px'
        }, 500, 'swing'); //.css("width","375px");
        $("#flower3").addClass("hideME");
        $("#flower33").removeClass("hideME");
    } else {
        $(this).html("+");

        //$("#container1,#container2").fadeIn(500, 'linear');
        $("#container3").animate({
            width: '100px'
        }, 500, 'swing'); //.css("width","375px");
        $("#flower3").removeClass("hideME");
       ...