Solved

How do I create a nested accordian with draggable content in jquery?

Posted on 2015-01-30
2
286 Views
Last Modified: 2015-02-03
Hi all,

I am trying to create a dynamic menu type structure in jQuery.
The idea is to have a nested accordion type structure where each 'group' can be dragged around within the structure.
When it is 'dropped', it's new parent info should be sent using Ajax
Each group should be expandable and collapsible.

Each item within these 'groups' can also be dragged around the structure.
When dropped, the items new group should be sent using Ajax.

There seems to be lots of examples around on the web dealing with either nested accordions or draggable content, but I cannot find anything showing how to use them in combination.

The data that will be used to populate this structure is in two arrays:
Group Array which contains an ID, Group Title and it's parent id (no parent = -1).
Entry Array which contains various properties and the group ID to which it belongs.

If anyone knows the best way to do this I would very much appreciate it.

Many thanks,

James
0
Comment
Question by:jatkin
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
2 Comments
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 40580104
>>> but I cannot find anything showing how to use them in combination.

That should be sending you a message.  What you want to do is very complex.  I doubt you are going to find anything off the shelf that meets those requirements.  So you have two options write it yourself (perhaps by modifying a plugin from the web that does part of the job) or if you lack the skills to work at the complex level required, hire a professional developer with good jquery skills to write it for you.

Cd&
0
 
LVL 4

Author Closing Comment

by:jatkin
ID: 40585670
That is exactly what I have done previously and it works fairly well.
With the amount of jQuery out there now (and there are some stunning examples), I thought that maybe there was a more polished version around to achieve my goals.
I guess for the moment I can live with what I have and perhaps look into doing something more dramatic further down the line.
Thanks for the input though.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

688 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question