show/hide content

by slawe

HTML

<nav>
    <a href="#" onclick="show('about')">about</a>
    <a href="#" onclick="show('projects')">projects</a>
    <a href="#" onclick="show('contact')">contact</a>
</nav>
<article id='about' class='content-hide content-show content-ani'>
        <section>
            <h2>ABOUT - Lorem ipsum dolor</h2>
            <div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sed quam ullamcorper, posuere ante quis, auctor nibh. Morbi aliquet porta pulvinar. In accumsan faucibus iaculis. Proin posuere, lorem sit amet ullamcorper auctor, eros massa sagittis magna, sed facilisis ipsum felis non turpis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras posuere sem est, eget suscipit sem molestie dictum. Integer ut velit ac mauris volutpat egestas ut non tellus. Vivamus risus lectus, pellentesque ac pharetra eu, euismod id libero. Sed et sagittis libero, vitae posuere felis. Aenean felis quam, malesuada scelerisque hendrerit in, dictum a magna. Duis vitae eros iaculis, imperdiet diam non, porttitor tortor.</p>

                <p>Integer laoreet tristique odio, non pretium tellus. Praesent ut nisi sit amet nisl vulputate euismod. Nam quam dui, consequat in nibh id, mollis pharetra lectus. Pellentesque elementum neque eu pulvinar accumsan. Cras urna eros, scelerisque ut turpis nec, lobortis dignissim eros. Phasellus aliquet malesuada magna et interdum. Cras nulla ligula, pellentesque eu diam malesuada, pellentesque congue risus. Nunc non justo non risus condimentum lobortis sit amet et nunc. Suspendisse nec eleifend nulla. Cras lobortis lectus nisl, sit amet tincidunt augue ultrices vel.</p>

                <p>Morbi lacinia, ligula pulvinar dignissim fringilla, felis nisl pellentesque justo, pharetra aliquam risus lectus at odio. Praesent id ipsum arcu. Maecenas in tincidunt leo. Cras ac lacinia lorem. Vestibulum eros velit, auctor adipiscing luctus et, blandit ut velit. Nunc rhoncus nec nulla non...

CSS

body{
    background: #000;
    color: #fff;
}

nav{
    display: block;
    position: relative;
    top: 10px;
    width: 100%;
    text-align: center;
}

a{
    display: inline-block;
    position: relative;
    margin-right: 20px;
    width: auto;
    height: auto;
    padding: 10px;
    background: #333;
    border: 1px solid #999;
    border-radius: 5px;
    color: lightgreen;
    font-size: 20px;
    text-decoration: none;
    text-transform: uppercase;
}

a:hover{
    border: 1px solid #ddd;
    box-shadow: 0px 0px 10px lightgreen;
}

.content-hide {
    height: 20%;
    display:none;
    overflow: auto;
    margin-top: 100px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
    opacity:0;
}
.content-show {
    display:block;
}
.content-ani {
    transition: opacity 1.5s ease;
    -webkit-transition: opacity 1.5s ease;
    opacity: 1.0;
}

JavaScript

function show(id){
    var articles = document.querySelectorAll("article");
    for(var i=0; i<articles.length; i++){
        articles[i].classList.remove("content-ani");
        articles[i].classList.remove("content-show");
    }
    var ele = document.getElementById(id);
    ele.classList.add("content-show");
    setTimeout(function(){
        animate(id);
    },1);
    return false;
}

function animate(id){
  var ele = document.getElementById(id);
    ele.classList.add("content-ani");
}