JSFiddle - React, Tailwind, and code Playground

by Jacques Surveyer

HTML

<h2>Click to trigger complete Display</h2>

<div class='accordc'>
    <img src="http://www.theopensourcery.com/keepopen/wp-content/uploads/2013/09/angie.jpg" width='200'>
    <div class='hiddenContent'>
        <img src="http://www.theopensourcery.com/keepopen/wp-content/uploads/2013/09/angie.jpg" width="785" />
        <p>Here is a sample of the new PsykoPaint program that runs in Adobe Air. It is a major new PhotoArtistry addition - see <a target="_blank" href="http://www.thephotofinishes.com/picthat/psykopaint-for-emotional-art/">thePhotofinishes.com review of Psykopaint</a>.</p>
    </div>
</div>

<h2>Mouse Enter and Leave triggers complete Display</h2>

<div class='accords'>
    <img src="http://www.theopensourcery.com/keepopen/wp-content/uploads/2013/09/1rose2.jpg" width='200'>
    <div class='hiddenContent'>
        <img src="http://www.theopensourcery.com/keepopen/wp-content/uploads/2013/09/1rose2.jpg" width="350" />
        <p>Last Fall was truly spectacular in the Northumberland Hills area of Eastern Ontario. See the complete photo story with muscical slideshows at <a target="_blank" href="http://picsofcanada.com/2013_the-wonderfall-of-2012/">PicsofCanada.com</a>.</p>
    </div>
</div>

CSS

* {
    margin:0;
    padding:0;
    font-family:sans-serif;
}
.hiddenContent {
    display: none;
}

JavaScript

/* Note this script enables revealing .hiddenContent either by a Click event [ use class .accordc to mark the outer container ] or the Mousenter/Mousleave events [then use the class .accords to mark the the outer container] */
jQuery(document).ready(function () {
    jQuery('div.accords').mouseenter(function (e) {
          jQuery(this).find('div.hiddenContent').slideToggle();
        jQuery(this).find("p").css('color', 'blue');
    });
    jQuery('div.accords').mouseleave(function (e) {
        jQuery(this).find('div.hiddenContent').slideToggle();
        jQuery(this).find("p").css('color', 'blue');
    });
    jQuery('div.accordc').click(function (e) {
        jQuery(this).find('div.hiddenContent').slideToggle();
        jQuery(this).find("p").css('color', 'blue');
    });

});