I am at the last step of something I have been coding for work, I have
a tabbed interface, where currently one tab has a single accordion, of
10 drawers, The draws are sortable, and the script is written to allow
multiple draws open at once.
The jquery and HTML will follow, but I have one question, how do I
make the accordion-like feature work across two tabs, I want the draws
from each to move between the tabs easily, allowing users to display
their main used and relocate the ones they dont to a rare use area.
jQuery :
$(function() {
$("#accordion1").addClass("ui-accordion ui-widget ui-helper-reset")
.find("h3")
.addClass("ui-accordion-header ui-helper-reset ui-state-default
ui-
corner-top ui-corner-bottom")
.prepend('<span class="ui-icon ui-icon-triangle-1-e"/>')
.hover(function() {
$(this).addClass("ui-state-hover");
},
function() {
$(this).removeClass("ui-state-hover");
})
.click(function() {
$(this).toggleClass("ui-accordion-header-active").toggleClass("ui-
state-active")
.toggleClass("ui-state-default").toggleClass("ui-corner-bottom")
.find(">
.ui-icon").toggleClass("ui-icon-triangle-1-e").toggleClass
("ui-icon-triangle-1-s")
.end().next().toggleClass("ui-accordion-content-active").toggle();
return false;
})
.next().addClass("ui-accordion-content ui-helper-reset
ui-widget-
content ui-corner-bottom").hide();
$("#accordion1").sortable();
})
HTML:
<div id="tabs-1">
<div id="accordion1">
<div><h3><a href="#">Draw 1 Title</a></h3>
<div>
Content draw 1
</div>
</div>
<div><h3><a href="#">Draw 2 Title</a></h3>
<div>
Content draw 2
</div>
</div>
<div><h3><a href="#">Draw 3 Title</a></h3>
<div>
Content draw 3
</div>
</div>
</div> // end accordion
</div> // end tab
<div id="tabs-2">
<div id="accordion2">
<div><h3><a href="#">Draw 4 Title</a></h3>
<div>
Content draw 4
</div>
</div>
<div><h3><a href="#">Draw 5 Title</a></h3>
<div>
Content draw 5
</div>
</div>
<div><h3><a href="#">Draw 6 Title</a></h3>
<div>
Content draw 6
</div>
</div>
</div> // end accordion
</div> // end tab
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
