mKzvNY

index.html

<div class="row">
  <div class="col-sm-3">
    <ul id="links">
    </ul>
  </div>
  <div class="col-sm-9">
    <h1>Wrapper</h1>
    <div id="wrapper">
      
      
    </div>
  </div>
</div>

mkzvny.markdown

mKzvNY

A Pen by Sumeet Gohil on CodePen.

License.

script.babel

(($)=>{
  
  const links = [{
    id: 1,
    title: 'Learn Java',
    slug: 'learn-java',
    data: {
      content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit sunt sint delectus doloremque maiores, corporis porro minus unde iure cum laborum, a incidunt, molestias dolores accusamus deleniti alias omnis odit.'
    }
  },{
    id: 2,
    title: 'Learn PHP',
    slug: 'learn-php',
    data: {
      content: 'php Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sit sunt sint delectus doloremque maiores, corporis porro minus unde iure cum laborum, a incidunt, molestias dolores accusamus deleniti alias omnis odit.'
    }
  }];
  
  const changePage = (linkItem) => {
    window.history.pushState(linkItem.data,linkItem.title, linkItem.slug);
    $('#wrapper').html(linkItem.data.content);
  };
  
  let activeLink = links[0].id;
  const renderLinks = () => {
    $('ul#links>li').remove();
    const uiLinks = links.map(item => {
      return $('<li></li>').addClass('link').append($('<a></a>').text(item.title).click((e)=>{
        e.preventDefault();
        changePage(item);
      }));
    });
    $('ul#links').append(uiLinks);
  };
  renderLinks();  
})($)

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.css

.link {
  cursor: pointer;
}

styles

<link href="//cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" rel="stylesheet" />