How to Implement jquery UI on Google Blogger

Jquery UI  is a powerful java library and can be used in Blogger by adding th following code just after the tag <head> in the templates option  ( Design -> Html Edition  )

<link href='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css' rel='stylesheet' type='text/css'/>
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js' type='text/javascript'/>
  <script src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js' type='text/javascript'/>

For example , if you want to use the accordion UI widget you can additionally put this code :


<script type='text/javascript'>
    $(function() {
        $(&quot;#accordion&quot;).accordion({
            collapsible: true,active:false
        });
    });
</script>

Then on an entry you can use this code


<div id="accordion">
<h3>
<a href="#">First header</a></h3>
<div>
First content</div>
<h3>
<a href="#">Second header</a></h3>
<div>
Second content</div>
</div>

to obtain obtain this functionality:


First header

First content

Second header

Second content

Comments

Popular posts from this blog

Crystal Reports Error 1606 could not access network location v4.030319\ASP.NETClientFiles\

Asp.net Security : A case using WebInspect

Timeout expired. The timeout period elapsed prior to obtaining a connection from the pool. This may have occurred because all pooled connections were in use and max pool size was reached."