so39297535

from SO http://stackoverflow.com/q/39297535/17300

by Stephen

HTML

<div class="container">
    <div id="productImage">
        <p>This is the <tt>&lt;div id="productImage"&gt;</tt> div</p>
        <p>Below are the collapsed images.</p>

        <div class="holder">
            <div class="plusMatch opener">Image One</div>
            <div class="prodimg hiding">Image 1 is Here</div>
        </div>

        <div class="holder">
            <div class="plusMatch opener">Image Two</div>
            <div class="prodimg hiding">Image 2 is Here</div>
        </div>
    </div>
</div>

CSS

div.container {
    display: block;
    color: black;
    max-width: 40em;
}
div.holder {
    border: 1px dotted blue;
    margin: 1em;
    padding: 1em;
}
div.prodimg {
    border: 1px dotted red;
}
div.prodimg.showing {
    display: block;
}
div.prodimg.hiding {
    display: none;
}
div.plusMatch.opener {
  background: url("https://s16.postimg.io/q2x2nnqk1/1472860024_plus.png") no-repeat top right;
  background-size: 16px 16px;
}
div.plusMatch.closer {
  background: url("https://s16.postimg.org/a3ef43ui9/1472860016_minus.png") no-repeat top right;
  background-size: 16px 16px;
}

JavaScript

$(document).ready(function() {

    $(".plusMatch").click(function(event) {
        var imgblock = $(this).parent().find('.prodimg');
        $(this).toggleClass('opener closer');
        imgblock.toggleClass('showing hiding');
    });
});