JSFiddle - React, Tailwind, and code Playground

by Emre Erkan

HTML

<div class="work">
  <img class="introPic" src="images/thumb.jpg" width="250" height="99" />
  <h3><img class="arrow" src="images/arrow_open.gif" alt="&gt;" /> <a class="titlelink" href="project2.html">Project 2</a></h3>
    <div class="projectIntro">
      <p>This is some intro text for project 2</p>
    </div>
    <div class="pictures"></div>
</div>

JavaScript

function close_other() {
    var selected_work = $('.selected_work');

    selected_work.children('.pictures').empty();
    $('.selected_work img.arrow').attr("src", "images/arrow_open.gif");
    selected_work.removeClass("selected_work");
}

$('div.work a').click(function(e) { e.preventDefault(); });
$('div.work').bind('click', function() {
    $('html,body').animate({ scrollTop: $(this).offset().top }, 500);
    var href = $(this).find('a').attr('href'),
        lastPart = href.split('/'),
        hash = lastPart[lastPart.length - 1];

    window.location.hash = hash;

    var parent = $(this);
    var content_holder = parent.children(".pictures");

    if (parent.hasClass("selected_work")) {
        close_other();
        return;
    }

    close_other();

    parent.addClass("selected_work");

    content_holder.load(href);

    $('.selected_work img.arrow').attr("src", "images/arrow_close.gif");
});