JSFiddle - React, Tailwind, and code Playground

by jitendravyas

HTML

<div><h1>Module 1</h1>
    <ul class="module1">
        <li>Some text here <br><img src="http://lorempixel.com/100/100/"/><br>some here </li>
        <li>Some text here <br><img src="http://lorempixel.com/100/100/"/><br>some here </li>
        <li>Some text here <br><img src="http://lorempixel.com/100/100/"/><br>some here </li>
        <li>Some text here <br><img src="http://lorempixel.com/100/100/"/><br>some here </li>
        <li>Some text here <br><img src="http://lorempixel.com/100/100/"/><br>some here </li>
        <li>Some text here <br><img src="http://lorempixel.com/100/100/"/><br>some here </li>
        <li>Some text here <br><img src="http://lorempixel.com/100/100/"/><br>some here </li>
        <li>Some text here <br><img src="http://lorempixel.com/100/100/"/><br>some here </li>
        <li>Some text here <br><img src="http://lorempixel.com/100/100/"/><br>some here </li>
        <li>Some text here <br><img src="http://lorempixel.com/100/100/"/><br>some here </li>
        <li>Some text here <br><img src="http://lorempixel.com/100/100/"/><br>some here </li>
        <li>Some text here <br><img src="http://lorempixel.com/100/100/"/><br>some here </li>
        <li>Some text here <br><img src="http://lorempixel.com/100/100/"/><br>some here </li>
        <li>Some text here <br><img src="http://lorempixel.com/100/100/"/><br>some here </li>
        <li>Some text here <br><img src="http://lorempixel.com/100/100/"/><br>some here </li>
        <li>Some text here <br><img src="http://lorempixel.com/100/100/"/><br>some here </li>
        <li>Some text here <br><img src="http://lorempixel.com/100/100/"/><br>some here </li>
        <li>Some text here <br><img src="http://lorempixel.com/100/100/"/><br>some here </li>
        <li>Some text here <br><img src="http://lorempixel.com/100/100/"/><br>some here </li>
        <li>Some text here <br><img src="http://lorempixel.com/100/100/"/><br>some here </li>
                <li>Some text here <br><img...

CSS

li {list-style:none; float:left; margin-bottom:30px; margin-right:10px; background:#eee}

.module1{border:1px solid #000; height:380px; overflow:hidden}

.module1 img {width:100px;height:100px}

.module2 {border:1px solid red; height:245px; overflow:hidden}

.module2 img {width:200px;height:100px}

.module3{border:1px solid blue; height:50px; overflow:hidden}

.module3 img {width:50px;height:50px}


.less-destination {display:none; }

JavaScript

$(function() {
    $(".more-destination").click(function(e) {
        e.preventDefault();
        var clone = $(this).parent().prev("ul").clone().appendTo('body').height('auto');
        var height = clone.height();
        clone.remove();
        
        $(this).parent().prev("ul").animate({
            height: height
        }, 800, function() {});
        
        $(this).next(".less-destination").toggle();
        $(this).toggle();
    });

    $(".less-destination").click(function(e) {
        e.preventDefault();
        var clone = $(this).parent().prev("ul").clone().appendTo('body').height('');
        var height = clone.height();
        clone.remove();
        
        $(this).parent().prev("ul").animate({
            height: height
        }, 800, function() {});
        
        $(this).prev(".more-destination").toggle();
        $(this).toggle();
    });
});