How to show sortable containers ?

Question: How to show sortable containers with JQuery?
Answer:
you can use following steps for this:

<br /> Step 1: Create a UL LI based listing<br /> Step 2: Assign ui-sortable class to UL<br /> Step 3: Assign Unique id to each LI<br /> Step 4: Write CSS for UL, LI and divs<br /> Step 5: Write JQuery code for manipulation

Example:

HTML
</p> <h1>Sorable</h1> <p></p> <div class="ui-widget"> <ul id="options" class="ui-sortable"> <li id="item_1" class="block ui-state-default"> Item 1 </li> <li id="item_2" class="block ui-state-default"> Item 2 </li> <li id="item_3" class="block ui-state-default"> Item 3 </li> <li id="item_4" class="block ui-state-default"> Item 4 </li> <li id="item_5" class="block ui-state-default"> Item 5 </li> </ul></div> <p>
CSS
<link rel="stylesheet" type="text/css" media="all" href="assets/css/ui.all.css">
JQuery
<br /> <script type="text/javascript" src="assets/js/jquery-1.6.4.min.js"></script><br /> <script type="text/javascript" src="assets/js/jquery-ui-1.8.16.custom.min.js"></script><br /> <script> $(function() { $(".ui-sortable").sortable({ opacity: 0.6, cursor: 'move', update: function() { var order = $(this).sortable("serialize"); alert(order); //Use AJAX POST Request to save sort order in your Database /*var url = "/sort_items"; $.ajax({ url: url, type: 'post', data: order, success: function(result) { } })*/ } }); }); </script><br />

Demo:

How to show tabs with JQuery

Question: How to show tabs with JQuery?
Answer:
you can use following steps for this:

<br /> Step 1: Create a UL LI based tabs listing<br /> Step 2: Create Div based HTML for each tab.<br /> Step 3: Assign 1 class to all divs and unique Ids to each div.<br /> Step 4: Write CSS for tabs and divs<br /> Step 5: Write JQuery code for manipulation

Example:

HTML
</p> <div id="mak_content_nav"> <ul> <li class="active"><a href="" divID="mak_div_1">Tab 1</a></li> <li><a href="" divID="mak_div_2">Tab 2</a></li> <li><a href="" divID="mak_div_3">Tab 3</a></li> </ul></div> <p> <br clear="all"></p> <div id="mak_div_1" class="tab-contents"> Contents for tab 1. </div> <div id="mak_div_2" class="tab-contents"> Contents for tab 2. </div> <div id="mak_div_3" class="tab-contents"> Contents for tab 3. </div> <p>
CSS
</p> <style> #mak_content_nav ul li{ width: 100px; float:left; border:1px solid #666; text-align:center; color:#000; } #mak_content_nav ul li a{ text-decoration:none; color:#000; } .tab-contents{ display: none; border:1px solid #666; border-top:none; width:304px; margin-left:40px; } .active{ border-bottom:none !important; } </style> <p>
JQuery
<br /> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"> </script><br /> <script> function makTabs() { $('.tab-contents').hide(); $('#mak_div_1').show(); $('#mak_content_nav li a').click(function() { $('.tab-contents').hide(); var link = $(this).attr('divID'); $("#"+link).show(); $('#mak_content_nav li').removeClass('active'); $(this).parent().addClass('active'); return false; }); } $(document).ready(function() { makTabs(); }); </script><br />

Demo: