JQuery UI Accordion Sortable Example Tutorial

Jqury UI

Nicesnippets

712

23-06-2020


Hi Guys,

In this example,I would like to share you how to use accordion sortable in jquery ui.you can easy use to accordin sortable in jquey ui.

jQueryUI provides sortable() method to reorder elements in list or grid using the mouse.

Example :

<!doctype html>

<html lang="en">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>jQuery UI Accordion - Sortable</title>

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<style type="text/css">

#accordion{

width:40%;

margin:40px auto;

}

.group h3{

background:#000;

border:1px solid #000;

border-radius: 0px;

}

h2{

text-align: center;

}

body{

background-color: #d3f49a;

}

</style>

</head>

<body>

<h2>JQuery UI Accordion Sortable Example - Nicesnippets.com</h2>

<div id="accordion">

<div class="group">

<h3>Section 1</h3>

<div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>

</div>

<div class="group">

<h3>Section 2</h3>

<div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>

</div>

<div class="group">

<h3>Section 3</h3>

<div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<ul>

<li>List one</li>

<li>List two</li>

<li>List three</li>

</ul>

</div>

</div>

<div class="group">

<h3>Section 4</h3>

<div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

<ul>

<li>List one</li>

<li>List two</li>

<li>List three</li>

</ul>

</div>

</div>

</div>

</body>

<script>

$(function() {

$( "#accordion" )

.accordion({

header: "> div > h3"

})

.sortable({

axis: "y",

handle: "h3",

stop: function( event, ui ) {

// IE doesn't register the blur when sorting

// so trigger focusout handlers to remove .ui-state-focus

ui.item.children( "h3" ).triggerHandler( "focusout" );

// Refresh accordion to handle new order

$( this ).accordion( "refresh" );

}

});

});

</script>

</html>

It will help you....