I'm trying to build a screen that will be a hierarchical list of bookmarks, grouped into categories. The categories can be expanded/contracted to show or hide the bookmarks for that category. Right now I'm just working on the UI and using jquery for the first time (and loving it).
The methodology I'm using is sorta like accordion but more than one section can be opened at the same time, and there can be multiple levels deep (accordion only supports one level). For each category, there's a div with an image of a folder in it that will show or hide the next element in the DOM, which would be the collection of bookmarks (usually a <ul>). eg:
<div class="categoryLine" id="d4">
<img class="folder"....>
Fourth Menu Item
</div>
<ul id="u4">
<li id="l41">
I select the element to close using $(this).parentsUntil('categoryLine').next().toggle(transitionSpeed); where the div around the image the user clicks on has a class of categoryLine, and the thing to show/hide is the element following that div.
The problem is in the most complex (deepest hierarchy) part, some things are being hidden that shouldn't be, and reappearing for unknown reasons.
You can see a "working" example here. I've given the relevant tags IDs and put in a debugging alert to display the ID of the element clicked on and the elements to be opened and closed (view source to see this).
Click on the folder for "Fourth Menu Item" to unhide that category. You should see sub 1, sub 2, and sub 3 appear.
Click on the folder for "Fourth Menu Item sub 1". You should see sub 1 expand, but sub 2 completely disappears, including the category line. This is the mystery I'm trying to solve. Clicking on sub 1 correctly says "Toggling 'u411' from category 'd41'" but when the <ul> u411 disappears, so does all of sub 2 disappears. Likewise, if I click on the folder to expand sub2, sub3 disappears.
I am open to implementing this in a completely different way (again, this is my first jquery experiment). I would also be willing to look at solutions where only one category could be open at a time, as long as it still supported a hierarchy instead of one deep like accordion.
Thanks in advance.
jQuery describes parentsUntil() as:
Description: Get the ancestors of each element in the current set of matched elements, up to but not including the element matched by the selector.
The important part to note there is that you're not selecting .categoryLine. It seems as though you want to be including it though. Should work if you use closest() instead.
$(this).closest('.categoryLine').next().toggle(transitionSpeed);
As a side note for future reference. ('categoryLine') is not a selector. Typically, you need to include the ., # or element type, ie div. There are more advanced methods though. You may want to read up on jQuery selectors.
Related
What I want to achieve is to have a list of element (div or span) where every item can be expanded and collapsed via click. Let's take in example the following image:
By default, the list will look as on the left: when I click on an item (in this example item2), that item will expand to show more info and, in case another item was expanded, that other item will collapse.. Meaning that I can have one item expanded at most.
I managed to do this already, but I want the item to expand/collapse smoothly, meaning with some animation.. Using JQuery I would go with some slideUp and SlideDown, but in REACT I haven't figured out how to do (I shouldn't manipulate the DOM like I would to in JS vanilla and Jquery).. I've seen 'React-Transition-Group' module but I didn't manage to do this with that module.
I have created prices tab now on the top I have created tabs and at bottom there are list items of different packages standard standard plus etc so when user selects first package 3 out of 6 items are visible and other are hidden so when user clicks second 4 or may be 5 items in the list are visible and rest are hidden same goes for the third package the problem is that I have able to working n it to make it easy rather then making 3 different div's to show all 3 packages I kept it to same and made list items and on every list item I have placed attribute I want when user click on any tab it will get the attribute name and find that attribute within the list and add's the active class to that I item make sense ? I have working on it for the past many days but unable to find the solution for it can anyone help me out with this concern.
[https://jsfiddle.net/90mynos3/][1]
If I'm understanding your question correctly, I see 2 issues with your code.
First you're never removing the active class, so once it's active, it will never be reset. Adding this at the beginning will remove the visible class.
$('li.visible').removeClass('visible');
Second, in order to add the class, you must target the correct elements, to do this, you can use an attribute selector:
$('li[data-clean-group~="' + get_class + '"]').addClass('visible');
Using the ~= operator will match li elements with a data-clean-group that contains the full word in get_class, preventing standard from matching standard_plus
See the this fork of your fiddle for a working example and this lesson on attribute selectors for more details on using attribute selectors.
I have an unordered list that is populated dynamically from a database. What I would like to do is drag and drop the list items to reorder the list.Ideally the new position of the list item is to be saved to a field within the database. This I can do. What I need help with is the Java Script code that swaps a list item with another.
Below is the code for populating the list. As you can see the page is written in ASP.
While not rsAwards.EOF
response.write "<li>" & rsAwards("Award_Name")
%>
<a href='edit_awards.asp?Action=edit&Award_ID=<%=rsAwards("Award_ID")%>'>Edit</a>
<a class="lb" href='action_awards.asp?Action=delete&Award_ID=<%=rsAwards("Award_ID")%>'>Delete</a></li>
<%
rsAwards.MoveNext
Wend
thanks in advance.
it's super easy!! 1 line of code. just add jquery UI (you don't have to add all of it) and some javascript like this:
$("#DivContainingYourliElements").sortable({delay:300,items:".myListElement"});
this will make the elements drag and drop sortable
You just need a countaining div to call sortable on, and add a class (here its .mylistElement) to each li element you want to be sortable
see this
http://jqueryui.com/sortable/
as another demo, I used it here. just log in with username: demo password: demo
then click on the first item and you'll see training path, which is sortable
http://knowledgecity.com/tna/tnaadmin.php
by the way, the "delay" attribut is important. It specifies the different between a click and a "drag". so here in my case, you can click them, or if you click and hold for 300 miliseconds, then it will go into drag/sort mode. If they only need to sort, set the delay to 1.
I have asked question about these two menus before, but the subject was a bit different, for now, all i want is to upgrade the previous code written here: accordion, tab menus, assign select class for both so that the class open_menu doesnt disappear after i click the link in it's sub menu, u can easily understand it from this script: http://jsfiddle.net/bq6tA/11/ in comments i tried to reply the man who wrote this script, but he didn't reply, but i really need to modify this script, right now, and thx for help everyone!
btw, if i refresh the page, the classes are assigned ok, once i click the sub menu link, the class open_menu for top menu link disappear.
Line 86 of tabcontent.js is looping through every item in your list structure and removing all styling classes if they're not the currently selected item:
this.getselectedClassTarget(this.tabs[i]).className=(this.tabs[i].getAttribute("rel")==subcontentid)? "selected" : ""
Add an additional click binder to reapply it for each lowest level item:
$("ul.reset a").click(function() {
$(this).closest("ul").siblings("a").addClass("open_menu");
});
See a working demo here.
Can you simply remove the .removeClass('open_menu') from the code?
I have the following setup:
A sortable list where one of the <li> has a table with lists in each cell.
All of the lists are sortable with each other.
Draggable items that can be added to any of the sortables
Issue: When adding a draggable item ('drag 1', 'drag 2', 'drag 3') to one of the lists in the horizontal lists (table of lists) it duplicates the draggable when dropped. Sometimes it will create both copies in the same list or one in the item list and one in the column list.
Here is a demo: http://jsfiddle.net/MQTgA/
Question: How do I prevent the second item being created when dropping the draggable?
UPDATE: With changing the class names of the horizontal lists to something else ('hlist') and omitting the new class name from the 'connectToSortable' option ('ul.hlist'), it no longer drops two copies and still allows the item to be dropped in any list. This doesn't seem right. Also when trying to drop an item into the horizontal list instead of the main list it seems very touchy as well (won't make for a good user experience). Thoughts?
Updated demo: http://jsfiddle.net/MQTgA/3/
It's doing that because your top level unordered list ( the one with Items 1 - X) has the same class as the tables unordered list. If you change the top level , to a different class name it should stop double dropping the draggable. I hope I'm understanding your problem correctly, here is my change. New code
EDIT: Actually that won't help either because then you wont be able to drop into your upper lists. I think the issue is that as you are dragging and dropping jquery doesn't know which ul you actually want to drop into. You could try making all the elements a little bigger so the user would not have to finesse the draggable into the right spot.
With some more experimenting I have found the best way is to have the horizontal lists not part of the main list. This way there are no double items being created when an item is dropped onto them and no touchiness when moving items around.
Here's a demo of what I'm going with looks like:
http://jsfiddle.net/MQTgA/5/