JSFiddle - React, Tailwind, and code Playground

by digthedoug

HTML

<div id="otherstuff">
    Other stuff on the page
</div>
<div id="storylist">
  <ul>
       <li>
         Title 1 goes here.
       </li>
       <li>
         Title 2 goes here.
       </li>
       <li>
         Maybe a Title 3 goes here, but it is dynamically generated.
       </li>
  </ul>
</div>

<div class= "buttonbar">
  <div>
    <span class="navbutton" id="librarybutton" >
        <a href ="#" title="Information">
            Information
        </a>
    </span>
    <span class="navbutton" id="storiesbutton" >
        <a href ="#">
            Stories
        </a>
    </span>
  </div>
</div>

CSS

#otherstuff{
    padding: 75px;        
}
#storylist{
    position:absolute;
    left:0;
    bottom:0;
}
#storylist ul{
    list-style-type:none;
    margin-left:-10px;
    position:relative;
    text-align:left;
}
.buttonbar{
    margin:20px 50px 20px 0;    
    text-align:center;
}
.navbutton a, #storylist{
    background:  black;
    color:white;
    margin: 5px;
    padding: 10px 25px 10px 25px; 
    text-decoration:none;
    font-weight:bold;
}

JavaScript

$('#storiesbutton').click(function() {
    $('#storylist').slideToggle(500);
});