JSFiddle - React, Tailwind, and code Playground

by chrismoutray

HTML

<hr />
<br />
<br />
<span class="news-text">
    <p><strong>At vero eos et accusamus et iusto odio dignissimos qui blanditiis praesentium voluptatumdeleniti.</strong></p>
    <div class="news-content" id="myContent">
        <p>At vero eos et accusamus et iusto odio dignissimos qui blanditiis praesentium voluptatumdeleniti atque corrupti quos dolores et quas molestias excepturi sint. At vero eos et accusamus et iusto odio dignissimos qui blanditiis Consectetur. Voluptatumdeleniti atque corrupti odio dignissimos qui blanditiis praesentium. At vero eos et accusamus et iusto odio dignissimos qui blanditiis praesentium voluptatumdeleniti atque corrupti quos dolores et quas molestias excepturi sint. At vero eos et accusamus et iusto odio dignissimos qui blanditiis Consectetur. Voluptatumdeleniti atque corrupti odio dignissimos qui blanditiis praesentium. At vero eos et accusamus et iusto odio dignissimos qui blanditiis praesentium voluptatumdeleniti atque corrupti quos dolores et quas molestias excepturi sint. At vero eos et accusamus et iusto odio dignissimos qui blanditiis Consectetur. Voluptatumdeleniti atque corrupti odio dignissimos qui blanditiis praesentium.<br /><br /></p>
    </div>
    <p align="right"><a class="toggle" href="#"><img src="http://www.70hundert.de/images/toggle-open.jpg" alt="" /></a></p>
</span>

<div class="clear"></div>
<hr />
<br />
<br />
<span class="news-text">
    <p><strong>At vero eos et accusamus et iusto odio dignissimos qui blanditiis praesentium voluptatumdeleniti.</strong></p>
    <div class="news-content" id="myContent2">
        <p>At vero eos et accusamus et iusto odio dignissimos qui blanditiis praesentium voluptatumdeleniti atque corrupti quos dolores et quas molestias excepturi sint. At vero eos et accusamus et iusto odio dignissimos qui blanditiis Consectetur. Voluptatumdeleniti atque corrupti odio dignissimos qui blanditiis praesentium. At vero eos et accusamus et iusto odio dignissimos qui blanditiis praesentium...

CSS

.news-content {
    display: none;
}

JavaScript

$('a.toggle').click(function () {

    var openImgUrl = 'http://www.70hundert.de/images/toggle-open.jpg',
        closeImgUrl = 'http://www.70hundert.de/images/toggle-close.jpg';
    
    var $newsItem = $(this).closest('.news-text'),
        $newsContent = $newsItem.find('.news-content'),
        isContentVisible = ($newsContent.is(':visible'));
    
    // slide up all shown news-items - but its expected that only one is visible at a time
    $('.news-text').find('.news-content').slideUp(function () { 
        // on animation callback change the img
        $('.news-text').find('.toggle > img').attr('src', openImgUrl);
    });

    if (!isContentVisible) { // if the new-item was hidden when clicked, then show it!
        $newsContent.slideDown(function () {
            // on animation callback change the img
            $newsItem.find('.toggle > img').attr('src', closeImgUrl);
        });
    }

    return false; // stop postback
});