JSFiddle - React, Tailwind, and code Playground

by Raimond van Mouche

HTML

<body>
<div class="wrapper">
<ul class="thumbs">
    <li id="link1">
        <a href="#">
            <img src="http://kommein.com/wp-content/uploads/2011/06/black.square.jpg" alt="">
        </a>
    </li>

    <li id="link2">
        <a href="#">
            <img src="http://kommein.com/wp-content/uploads/2011/06/black.square.jpg" alt="">
        </a>
    </li>

    <li id="link3">
        <a href="#">
            <img src="http://kommein.com/wp-content/uploads/2011/06/black.square.jpg" alt="">
        </a>
    </li>

    <li id="link4">
        <a href="#">
            <img src="http://kommein.com/wp-content/uploads/2011/06/black.square.jpg" alt="">
        </a>
    </li>
</ul>

<div class="about clearfloat">
    <div class="content" id="page1">
        <h1>Page 1</h1>
        <p>section of content</p>
    </div>

    <div class="content" id="page2">
        <h1>Page 2</h1>
        <p>section of content.</p>
    </div>

    <div class="content" id="page3">
        <h1>Page 3</h1>
        <p>section of content.</p>
    </div>

    <div class="content" id="page4">
        <h1>Page 4</h1>
        <p>section of content.</p>
    </div>
</div>


</div>
</body>

CSS

/* tools */
.clearfloat {
    clear:both
}

/* recurring elements */
.wrapper {
    max-width:960px;
    margin:0 auto;
}

.thumbs img {
    float:left;
    width: 220px;
    margin: 0 10px 5px 0;
}

.thumbs li {
    list-style:none;
}

JavaScript

$('.thumbs a').click(function(e) {
    hideNotInUse();
    var tmp_div = $(this).parent().index();
    $('.about div').eq(tmp_div).show();
});

function hideNotInUse() {
    $('.about div').each(function() {
        $(this).hide();
    });
}
hideNotInUse();