JSFiddle - React, Tailwind, and code Playground

by dpmartin42

HTML

<script src="http://demos.9lessons.info/data.json"></script>
<!--<div id="9lessonsLinks"></div>-->

<body>
<div class="slider">
    
    Blah dfg sfd saf asdf asdfas asdfas asdf asdf
    
</div>    

<div class="button"><button>toggle the div</button></div>
    



 
</body>

CSS

.slider {
    width: 100px;
    height: 100px;
    background: #ccc;
    border: 1px solid #000;
    position: fixed;
    right: 5px;

  }
.button{
    position: fixed;
    top: 110px;
}

JavaScript

/*var data = {"posts": [ { "title":"Foo", "url":"google.com"}, { "title":"Gah", "url":"yahoo.com" }]}

$(function() 
{
$(document).ready(function()
{
$.each(data.posts, function(i,data)
{
var div_data =
"<div ><a href='"+data.url+"'>"+data.title+"</a></div>";
$(div_data).appendTo("#9lessonsLinks");
});
}
);
return false;
});
*/

$( "button" ).click(function() {
  $( ".slider" ).toggle( "slide", {direction: 'right'}, 1000 );
});