JSFiddle - React, Tailwind, and code Playground

by Marc

HTML

<div class="i-holder">
    <div class="i-left">
        <img class="i-one" src="http://placehold.it/200x120.jpg" />
        <div class="i-more hidden">
            <img src="http://placehold.it/200x120.jpg" />
            <img src="http://placehold.it/200x120.jpg" />
            <img src="http://placehold.it/200x120.jpg" />
        </div>
    </div>
    <div class="i-right">
        <h2>Header here</h2>
        <p>Text here text here text here text here text here text here text  here...</p>
        <img class="i-btn-more" src="http://placehold.it/40x30.jpg" alt="read more" />
        <div class="i-more hidden">
            <p>More text here more text more text more text more text more text more text more text more text more text here text here text here text here text here text here text here text here text here text here text here.</p>
            <p>More text here more text more text more text more text more text more text more text more text more text here text here text here text here text here text here text here text here text here text here text here.</p>
            <a href="javascript();" class="less">Show less</a>
        </div>
    </div>
    <div class="clear"></div>

</div>

<!-- another item, can't change classes -->

<div class="i-holder">
    <div class="i-left">
        <img class="i-one" src="http://placehold.it/200x120.jpg" />
        <div class="i-more hidden">
            <img src="http://placehold.it/200x120.jpg" />
            <img src="http://placehold.it/200x120.jpg" />
            <img src="http://placehold.it/200x120.jpg" />
        </div>
    </div>
    <div class="i-right">
        <h2>Header here</h2>
        <p>Text here text here text here text here text here text here text  here...</p>
        <img class="i-btn-more" src="http://placehold.it/40x30.jpg" alt="read more" />
        <div class="i-more hidden">
            <p>More text here more text more text more text more text more text more text more text more text more text here...

CSS

.shown{max-height: 1000px; transition: max-height 0.5s ease-in; overflow:hidden;}
.hidden{max-height: 0; transition: max-height 0.5s ease-out; overflow:hidden;}

.i-holder{width:600px; margin:20px; position:relative;}
.i-left img{display:block; margin-bottom:10px;}

.i-left{float:left; width:200px; background:#fc1; min-height:130px; }
.i-right{float:right; width:320px; padding:0 50px 10px 10px; background:#6d1; min-height:130px; }

.i-btn-more{position:absolute; cursor:pointer; margin:-40px 0 0 330px;}
.i-more{clear:both;}

.clear{clear:both;}

JavaScript

// when click on .i-btn-more it needs to show the child div .i-more and not all.
// another thing, I need to show nothing when I click on .less

$('.i-btn-more').on('click', function () {
    $(this).parents('.i-holder').find('.i-more').toggleClass('shown hidden');
});