JSFiddle - React, Tailwind, and code Playground

by Sethu raman

HTML

<div class="no-1">
    <ul id="filter">
        <li class="portfolio" id="postid-1">
            <a href="#more-data-1">View More Stuff 1</a>
        </li>
        <li class="portfolio" id="postid-2">
            <a href="#more-data-2">View More Stuff 2</a>
        </li>
        <li class="portfolio" id="postid-3">
            <a href="#more-data-3">View More Stuff 3</a>
        </li>   
    </ul>
</div>

<div class="no-2">
    <div class="portfolio-more" id="more-data-1">
    <p>More Stuff 1<p>
        <a class="back" href="#">back</a> 
    </div>
    <div class="portfolio-more" id="more-data-2">
        <p>More Stuff 2<p>
            <a class="back" href="#">back</a>
    </div>
    <div class="portfolio-more" id="more-data-3">
        <p>More Stuff 3<p>
            <a class="back" href="#">back</a>
    </div>      
</div>

JavaScript

$('.portfolio-more').hide();
$('.portfolio').click(function(){
    $('.portfolio-more').hide();
    $('.no-1').hide();
    $($(this).find('a').attr('href')).show();
});

$('.back').click(function(){
    $('.portfolio-more').hide();
    $('.no-1').show();
});