Is it possible to have an accordion embedded in another accordion with jQuery UI?
-Item One
-Item Two
-Item Three
--Sub One
--Sub Two
--Sub Three
-Item Four
Where Sub One through Four is another accordion.
Thanks
Give each container that you want to make an accordion a class like accordion and use:
$(".accordion").accordion();
Just give different id names for each accordion and call them in the jquery function an you would have to edit the css to get the desired look though.
$(function() {
$( "#accordion,#accordion2" ).accordion();
});
DEMO
Related
I want to implement similar functionality to the jQuery UI Draggable & Sortable, but using Kendo UI.
This should allow me to drag from a list of options and place them within a sortable list.
Here is the jQuery UI functionality: http://jqueryui.com/draggable/#sortable
I want 2 panels, one with items that can be dragged and the other containing the dragged items. The closest thing I could find on Kendo UI is: http://demos.telerik.com/kendo-ui/sortable/linkedlists, but the items in the first list (on the left) are sortable and this moves the item from the first list.
I have looked at all of the Kendo UI samples on Teleriks website, but I cannot see any examples of how to do this.
Update:
I am now part way there. I have 2 sortable lists and I have added code to stop the 'draggable' items from sortable. However, when I drag an item to the 'sortable' list, it disappears from the 'draggable' list.
Here's the code I'm using to stop the items being sortable:
start: function() {
$("#draggable li").each(function() {
$(this).removeClass("sortable");
});
Here is the fiddle: http://jsfiddle.net/kgjertsen/r4xmLevq/
Anyone able to tell me how to stop the items from disappearing?
After a lot of investigation, it turns out that you cannot link draggable with sortable, as you can with jQuery. You need to drop the item into the container, then sort it from its default place, which is at the bottom.
Telerik justify this with a statement saying that they cannot implement this behaviour as the controls cannot know about each other, as this is bad practice.
Personally, I think this is terrible and the functionality would be a great addition to the Kendo UI library.
I have an LI with A tag in it.
<li title="LI TEXT" id="test">
ELEMENT WITH HREF HREF
</li>
I want to create jquery tooltip for the LI and default tooltip for its child elements. But this does it both for the jquery elements for LI and its childs.
$("#test").tooltip();
http://jsfiddle.net/k45emuhg/
Okay, what you've described is quite easy with the items option. Simply include a selector restriction for the items you want to show their tooltips, e.g. the same as the original selector that you're calling .tooltip() on:
$("#test").tooltip({items: "#test"});
The question doesn't make this explicit, but you probably also want to show only one (rather than 2) tooltips when you hover over the children element. To do that, you can disable and reenable the parent's tooltip on the mouseenter and mouseleave events. JQuery provides a nice shortcut for that with the hover function:
$("#test a").hover(function() {
$(this).parent().tooltip("disable");
}, function() {
$(this).parent().tooltip("enable");
});
Note that you can use any relevant selector, not necessarily $(this).parent(), depends on how your HTML is structured
Here's the example fiddle updated: http://jsfiddle.net/957r8x51/
I'm using JQuery UI Sortable to allow reordering elements within a list when dragging element. I would like to improve this processing by allowing reordering only when dragging from an icon present in each element (this icon is a span within the li) not for the whole element.
Is it possible to do this with Sortable?
Thanks very much for your help!
Thierry
Yes, jQuery-UI provides a "handle" option:
http://jqueryui.com/demos/sortable/#option-handle
Restricts sort start click to the specified element...
Initialize a sortable with the handle option specified.
$( ".selector" ).sortable({ handle: 'h2' });
I am using jquery ui tabs
Inside a tab i want to inset an autocomplete combobox
When the combobox is outside the tabs it works perfect, but when inside the tabs it doesnt look good.
Here is a screenshot:
Any ideas how to solve this issue?
solved it. i had a class for span inside the tabs ( #tabs span {......} ) –
I have a list of images which are sortable. To delete them, the user will drag them from the Sortable list to a Droppable div representing a trashcan. How can I accomplish this?
Do I need to add a draggable to each of the image for it to work with the droppable?
The accepted answer seems to provide faulty information. For anyone referring to this post in future,
From rjmunro's comment for the accepted answer -
Sortables are already draggable. There's no need to explicitly declare them as draggable.
JSFiddle Demo
From JQuery UI Documentation -
By default, sortable items share draggable properties.
Yes, each image needs to be draggable (even though it is already sortable).
An item needs to be draggable so that you can drop it on your droppable area.
jQuery has a nice demo of how to make Sortable and Draggable items play nicely together:
jQuery UI - Draggable Demos