jquery accordion, simple increment and decrement
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

I am using the following jsfiddle as a template:


The text for panels are correct but the ids are wrong.
It should increment and decrement id and name approriately.
i.e. If I have panels 1,2,3,4 and I remove 2 then 3 & 4 drops down 1 place each to 2,3.
So now it is 1,2,3. If I then add a new panel, the new panel would be 4.
The key is for the count to be consistent.

Within each panels are fields time in and time out for each panel.
I need a jquery plugin that allows for scrolling hour and minutes like what is seen on mobile devices. Also for times, they should not intersect with other panels.
They can touch but not overlap.
i.e. panel 1= 9:00 am - 10:00 am, panel 2= 10:00 am - 11:00 am

could you explain more about the time while i fix the accordion?
Chlegou 10 months ago
i have created another solution, check it to see how it does ;)
Chlegou 10 months ago
awarded to Chlegou

Crowdsource coding tasks.

3 Solutions

Hi there,

i fixed the accordion as you expect,

the one thing to do, is to separate the html element id and the text appearing in document body, which i think you already know, since you used a variable named hash to increment id, but in general, we generate them.

i have added a function, that will add to every panel it's index inside the #accordion parent. this function should be called, in every changes we make, (creating/ deleting/ ordering ..)

here is a working solution: http://jsfiddle.net/m5TMF/1092/

updated solution following updated bounty link: http://jsfiddle.net/vzLawy4g/4/

i'm not understanding what you really want from the time thing you talked about, but i'm pretty sure, you want a time picker like in mobile devices, IF YES, i believe the DateBox plugin is what you are looking for.

Try TimeFlipBox demo, i think is what you are looking for:

link: http://dev.jtsage.com/DateBox/

it appears they have a theme builder, try it, to customize your design. they support the bootsrap4 even.

link: http://dev.jtsage.com/DateBox/theme/bootstrap4/

docs is also available from the first link.


here is a working solution for what you want, following the updated bounty.

link: https://codepen.io/chlegou/pen/ZRdOGq

Cheers, ;)

I had updated the js fiddle. I had the wrong link originally
penguin629 10 months ago
I forgot to mention that I am using moment js for the time data. I want each of those panels of start and end time to not intersect other panels per the example I stated above. Any ideas how to do it? Each panel start and end time should not overlap any other panels’ times.
penguin629 10 months ago
i have updated the bounty, with a working solution as you required. i just saw the overlapping thing you talked about, doing that, i don't know if the library is supporting that, also, when deleting, we should change last values also....
Chlegou 10 months ago
things are coming frustrating, ... if you really want to do that, i will try to do it.
Chlegou 10 months ago
This is a great start. I just need the user to be able to select the time. I just need validation to make sure the time does not intersect. I should've been more clear.
penguin629 10 months ago
I have two approach, one to toest if that plugin support validation, otherwise I will build one. I will complete tomorrow.
Chlegou 10 months ago

Hi again,

after an extremely frustrating and hard day looking for solutions, here i'm back with my final draft.
didn't want to touch the last bounty, since this solution is completely different from it.

i will start first by describing the issues i had working on the last solution.

link: https://codepen.io/chlegou/pen/ZRdOGq

according to it, i tried to add a validation function in it, but i went down under an infinite onChange listener callback.

i had this similar problem before, when i tried to add a week time sheet in an angular project, when i didn't succeed to make it. it was extremely hard to bypass the infinite listener loop. so i drop it down, and changed the theory to work with to get an accepted solution.

the validation function still in the above code, anyone can feel free to collaborate and complete it, maybe he inspire me to get solution to my old project problem :p.

By remembering that project, i remembered an old solution that i tried by that time, that didn't work on an angular project, but was perfect regarding results. it does exactly what i wanted from the beginning.

so my thinking was, why not i nominate it, since i believe that it does exactly what to need. from it, you can created infinite visit plans,

the library is named Elessar

github: https://github.com/quarterto-archive/Elessar

official demo: http://quarterto-archive.github.io/Elessar/

the library has a basic staying, but could be adjusted since css3 is awesome.

here is a solution that i customize for you, i made it add as minimum, 1 hour plan, and can slide by 15 min.

link: https://codepen.io/chlegou/pen/mKZYKb

by the end, hope you appreciate the 12 frustrating hours i passed looking for a solution for you ;) , and necessarily, you like the alternative solution i proposed. :)

Your solution in https://codepen.io/chlegou/pen/ZRdOGq is very close to what I need. To be clear, the user can create any initial start time. It should not be locked to present time. So just need to make that change and insert your result array to one of the two links below and I should have a solution. Which ever one is easier to implement. You can use the following function (convert from date to time): https://derickbailey.com/2015/09/07/check-for-date-range-overlap-with-javascript-arrays-sorting-and-reducing/ You can use momentjs functions per Alberto Trindade Tavares' suggestion on stackoverflow: https://stackoverflow.com/questions/44800471/check-if-times-overlap-using-moment
penguin629 10 months ago
Also the time should be in meridiem: AM, PM.
penguin629 10 months ago
Winning solution

hi again,

here i'm posting another third solution for this problem.

before i start, i wanted to say, that this solution is one of the most challenging codes i have ever written.

following what we said last time, i wrapped an example, that demonstrate how it should works,

link: https://codepen.io/chlegou/pen/pZvZYw

i believe this example, do exactly what we want, after continuous tests when writing, it looks working perfectly as we wanted it to do. even if there is some case when error occurs, we could fix them later on...

i think the only thing to do now, is to add a function to store the periods intervals which is easy to do, comparing to the work have being done.

View Timeline