Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  p { color: blue; }
</style>
</head>
<body>
  <p>some text</p>
<ul id="accordion">
    <li><a href="?section=recent" class="heading">Recent Entries</a>
        <ul id="recent">
            <li><span class="date">01.19.2009</span> <a href="#">Recent Entry Title</a></li>
            <li><span class="date">01.15.2009</span> <a href="#">Recent Entry Title</a></li>
            <li><span class="date">01.13.2009</span> <a href="#">Recent Entry Title</a></li>
            <li><span class="date">01.11.2009</span> <a href="#">Recent Entry Title</a></li>
            <li><span class="date">01.10.2009</span> <a href="#">Recent Entry Title</a></li>
        </ul>
    </li>
    <li><a href="?section=popular" class="heading">Popular Entries</a>
        <ul id="popular">
            <li><span class="date">08.16.2008</span> <a href="#">Popular Entry Title</a></li>
            <li><span class="date">06.12.2008</span> <a href="#">Popular Entry Title</a></li>
            <li><span class="date">04.12.2008</span> <a href="#">Popular Entry Title</a></li>
            <li><span class="date">06.12.2007</span> <a href="#">Popular Entry Title</a></li>
            <li><span class="date">03.12.2007</span> <a href="#">Popular Entry Title</a></li>
        </ul>
    </li>
    <li><a href="?section=categories" class="heading">Categories</a>
        <ul id="categories">
            <li><a href="#">Category Name</a> <span class="count">7</span></li>
            <li><a href="#">Category Name</a> <span class="count">4</span></li>
            <li><a href="#">Category Name</a> <span class="count">15</span></li>
            <li><a href="#">Category Name</a> <span class="count">29</span></li>
            <li><a href="#">Category Name</a> <span class="count">8</span></li>
        </ul>
    </li>
    <li> <a href="?section=archive" class="heading">Archive</a>
        <ul id="archive">
            <li><a href="#">January 2009</a> <span class="count">4</span></li>
            <li><a href="#">December 2008</a> <span class="count">14</span></li>
            <li><a href="#">November 2008</a> <span class="count">12</span></li>
            <li><a href="#">October 2008</a> <span class="count">8</span></li>
            <li><a href="#">September 2008</a> <span class="count">18</span></li>
        </ul>
    </li>
</ul>
</body>
</html>
 
​
// turn #accordion into a simple accordion menu
// adds style to the head from json data
$(document).ready(function() {
  
  // hide <ul> nested in accordion
  $('#accordion').find('ul').hide();
  
  // add click event to accordion .heading
  $('#accordion').find('.heading').click(function(e) {
    // do not follow anchor
    e.preventDefault();  
    // slide up any open sections
    if(!($(this).hasClass('open'))) {
      $('.open').removeClass('open').next().slideUp();
    }
    $(this).addClass('open').next().slideToggle();
    
  });
  
  // a function that parses json and a
  // appends it to <style>
  function addStyleFromJson(json) {
    // turn json into normal string
    var style = JSON.stringify(json);
    // remove apostrophes, colons before {, opening and closing {}
    style = style.replace(/(")|(:(?=\{))|(^\{)|(\}$)/g, '');
    // remove commas after }
    style = style.replace(/(\}|\;),/g, function($0, $1){
    return $1 ? $1 + '' : $0;
    });
    style = $('style').text() + style;
    // append style element to head
    $('style').text(style);  
  }
  
  // load some style
  $.ajax({
    url: 'http://dl.dropbox.com/u/47426368/somejson.js',
    dataType: 'jsonp',
    jsonp: false,
    jsonpCallback: 'myCallback',
    cache: true,
    success: addStyleFromJson
  });
  
});
​
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers