tag:blogger.com,1999:blog-7088569370062387759.post5824075853377009621..comments2024-03-29T10:03:26.121+05:30Comments on Acmeous Web Designing and Technology Tips: How to Create Easy Collapsible and Expandable Lists in JavaScriptAcmeoushttp://www.blogger.com/profile/12430881953964182897noreply@blogger.comBlogger27125tag:blogger.com,1999:blog-7088569370062387759.post-2752186365099465372015-09-11T18:24:34.539+05:302015-09-11T18:24:34.539+05:30Thanks so much for sharing, This is what I'm l...Thanks so much for sharing, This is what I'm looking for!Waterproofing Servicehttp://www.bettershower.repair/noreply@blogger.comtag:blogger.com,1999:blog-7088569370062387759.post-63889490779387137782014-08-13T22:16:00.477+05:302014-08-13T22:16:00.477+05:30Very slick - thanks so much!Very slick - thanks so much!Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-7088569370062387759.post-91096022061026201072013-12-13T10:00:24.737+05:302013-12-13T10:00:24.737+05:30Thanks for this great code! It is very simple and ...Thanks for this great code! It is very simple and useful! <br /><br />I would like to get rid of the [+] and [-] open/close buttons, and instead have the text in the < li > be clickable, to expand the list. I have been poking around but can't figure it out. Can anyone lend a hand?crack$https://www.blogger.com/profile/16638152120578279525noreply@blogger.comtag:blogger.com,1999:blog-7088569370062387759.post-56826848692795944972013-11-17T15:23:59.475+05:302013-11-17T15:23:59.475+05:30Hello this is great but just one thing which im no...Hello this is great but just one thing which im not really sure how to do is this:<br />i would like to be able to have some of the main list items to not be expandable (as in not have the plus next to them) and just be an ordinary item (as in are of the same level as the expandable ones but not expandable) <br />this is due to the (document.getElementById('listCategories'), 1);}; function and have tried ClassName and making the list items into classes but it wont work - would you be able to suggest anything - im a noob also!<br />thanks Anonymoushttps://www.blogger.com/profile/12267120917826200266noreply@blogger.comtag:blogger.com,1999:blog-7088569370062387759.post-81251332395777788452013-08-30T19:45:38.864+05:302013-08-30T19:45:38.864+05:30It only worked one time on a page. On other areas ...It only worked one time on a page. On other areas of the page it didn't work.Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-7088569370062387759.post-62895851162425537392013-01-07T17:34:36.560+05:302013-01-07T17:34:36.560+05:30 When presenting a long lists of item you can set ... When presenting a long lists of item you can set them to remain collapsed on page load, but after that users can click and expand any of those list headings to see the full list of items.Ganeshan Nadarajanhttp://www.solidradicle.comnoreply@blogger.comtag:blogger.com,1999:blog-7088569370062387759.post-38631132400878605592012-10-26T05:03:32.870+05:302012-10-26T05:03:32.870+05:30Hello Acmeous...thanks for your work! I edited the...Hello Acmeous...thanks for your work! I edited the images a little, and have this page working:<br /><br />http://www.brocathalon.com/faq<br /><br />My only question is, can we make the whole first line "clickable"? For example, instead of just clicking the plus sign, you could click "List by category" as well. This page shows what I'm thinking of:<br /><br />http://www.colormerad.com/faq.html<br /><br />Thanks again! You're awesome to help like this.Rayhttp://www.brocathalon.comnoreply@blogger.comtag:blogger.com,1999:blog-7088569370062387759.post-79711681964950859472012-07-23T23:06:23.331+05:302012-07-23T23:06:23.331+05:30Hi JD,
You can do it easily by just setting the cl...Hi JD,<br />You can do it easily by just setting the class of the "li" which contains your present page (say "Header 2" here) as "collapsibleOpen".Acmeoushttp://acmeous.blogspot.comnoreply@blogger.comtag:blogger.com,1999:blog-7088569370062387759.post-30269376099687131532012-07-23T08:09:31.830+05:302012-07-23T08:09:31.830+05:30Nice script. I use it as a menu. Now what I would ...Nice script. I use it as a menu. Now what I would like to do is expand the menu to the correct place when the page opens. So the scenario would be:<br />List:<br />Header 1<br /> - Page 1<br /> - Page 2<br />Header 2<br /> - Page 3<br /> - Page 4<br />etc...<br />Each page uses the same script based menu. What I want to do is expand the menu to the correct place e.g. if I click on Page 3, the page opens with the Header 2 expanded and Header 1 collapsed. Is this possible?Jasonhttps://www.blogger.com/profile/08799092100107237858noreply@blogger.comtag:blogger.com,1999:blog-7088569370062387759.post-55915955118129065642012-01-25T05:28:16.012+05:302012-01-25T05:28:16.012+05:30For some reason IE9 doesn't read the script an...For some reason IE9 doesn't read the script and is presenting the list expanded and it doesn't allow you to collapse but it works great in all other browsers. Help?Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-7088569370062387759.post-17824457010653128882012-01-23T16:42:10.728+05:302012-01-23T16:42:10.728+05:30Hey Anonymous,
I have done all the action on the c...Hey Anonymous,<br />I have done all the action on the click of the "plus.jpg" image and intentionally didn't touch the text of the list since those texts can contain links. So this shouldn't be interfering with links. But please let me know how you are trying to implement this then I can be of some help definitely. <br />Please contact me for specific solution.Acmeoushttp://acmeous.blogspot.comnoreply@blogger.comtag:blogger.com,1999:blog-7088569370062387759.post-82459884646846156602012-01-23T08:17:13.555+05:302012-01-23T08:17:13.555+05:30Thanks so much for the code. It seems you've ...Thanks so much for the code. It seems you've overloaded the .click action to facilitate expansion and collapse. Unfortunately, this prevents links from working correctly as list elements. Do you know off-hand of a way to re-add this functionality, probably as a single line in prepareList() of scripts.js?Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-7088569370062387759.post-82654549890883186912012-01-15T05:23:32.496+05:302012-01-15T05:23:32.496+05:30Thanks for your help! I have a 1&1 site if tha...Thanks for your help! I have a 1&1 site if that means anything. It doesn't seem to allow me to put anything on the server like that. I uploaded them directly on that page but it didn't seem to work. I don't necessarily need the plus and minus buttons, but still striving for the effect. I don't know if that's even possible. Sorry to be a pain!Jenna Lainehttps://www.blogger.com/profile/00331071066972167494noreply@blogger.comtag:blogger.com,1999:blog-7088569370062387759.post-3120931706024217742012-01-15T05:08:33.223+05:302012-01-15T05:08:33.223+05:30Hey Jenna,
I saw your page is already working. Jus...Hey Jenna,<br />I saw your page is already working. Just copy the plus.jpg and minus.jpg images to your server and those will show up. <br />Copy -<br />http://www.acmeous.com/tutorials/demo/acmeousCollapsibleLists/plus.jpg<br />http://www.acmeous.com/tutorials/demo/acmeousCollapsibleLists/minus.jpg<br />The images should here - http://jenna-laine.com/resume/minus.jpg and http://jenna-laine.com/resume/plus.jpg. <br /><br />Let me know if you still face issues.Acmeoushttp://acmeous.blogspot.comnoreply@blogger.comtag:blogger.com,1999:blog-7088569370062387759.post-79390398830710266002012-01-15T04:33:56.648+05:302012-01-15T04:33:56.648+05:30P.S. - I know I still have to plug in the text but...P.S. - I know I still have to plug in the text but wanted to make sure it was working first.Jenna Lainehttps://www.blogger.com/profile/00331071066972167494noreply@blogger.comtag:blogger.com,1999:blog-7088569370062387759.post-78698409316803728162012-01-15T04:32:43.736+05:302012-01-15T04:32:43.736+05:30Hey I still can't get this to work here. Not s...Hey I still can't get this to work here. Not sure what I'm doing wrong. Thanks for your help! <br /><br />http://jenna-laine.com/resume/Jenna Lainehttps://www.blogger.com/profile/00331071066972167494noreply@blogger.comtag:blogger.com,1999:blog-7088569370062387759.post-72991272849750648302011-12-06T21:41:21.557+05:302011-12-06T21:41:21.557+05:30Yes, after tinkering around some more, I was able ...Yes, after tinkering around some more, I was able to fix it. Thanks for getting back to me about it! :)Ginahttp://gcimages.netnoreply@blogger.comtag:blogger.com,1999:blog-7088569370062387759.post-12331259726543239352011-12-06T15:04:53.994+05:302011-12-06T15:04:53.994+05:30Hey Gina,
I think its working fine on your site as...Hey Gina,<br />I think its working fine on your site as your have copied the JS and image files properly :).<br />Thanks for visiting my blog.Acmeoushttp://acmeous.blogspot.comnoreply@blogger.comtag:blogger.com,1999:blog-7088569370062387759.post-57980596303689435832011-12-06T06:52:23.311+05:302011-12-06T06:52:23.311+05:30I'm having similar issues that How To Wire had...I'm having similar issues that How To Wire had with the +/- images being "missing" and unable to figure out how to fix it despite many attempts.<br />Please help.<br /><br />Here's the page I'm trying to fix: http://www.gcimages.net/blog/about/articles/Ginahttp://gcimages.netnoreply@blogger.comtag:blogger.com,1999:blog-7088569370062387759.post-20668228845026204982011-11-02T20:33:08.532+05:302011-11-02T20:33:08.532+05:30Great, thanks. I was able to figure out how to add...Great, thanks. I was able to figure out how to add a child list which is also collapsible by adding a separate "script type" section with its own "ListCategories" name and a matching nested ul id. But how do I indent the child from it's parent?Anonymousnoreply@blogger.comtag:blogger.com,1999:blog-7088569370062387759.post-77776804322751938862011-09-10T10:59:43.240+05:302011-09-10T10:59:43.240+05:30Yes there is.
In the function call - {makeCollapsi...Yes there is.<br />In the function call - {makeCollapsible(document.getElementById('listCategories'), 1);}, false); - 1 means the list is expanded by default. Set it to 0 and your list will be by default collapsed.Acmeoushttp://acmeous.blogspot.comnoreply@blogger.comtag:blogger.com,1999:blog-7088569370062387759.post-17219029216565659242011-09-10T10:29:25.146+05:302011-09-10T10:29:25.146+05:30Thanks for the easy code is there a way to make it...Thanks for the easy code is there a way to make it start of collapsed?Leonhttp://www.leonsthoughtforfood.comnoreply@blogger.comtag:blogger.com,1999:blog-7088569370062387759.post-91747842605874772412011-08-10T22:02:35.923+05:302011-08-10T22:02:35.923+05:30thanks so much for sharing it really helpedthanks so much for sharing it really helpedAnonymousnoreply@blogger.comtag:blogger.com,1999:blog-7088569370062387759.post-8399115096003936142011-07-30T15:37:32.986+05:302011-07-30T15:37:32.986+05:30Wonderful and really easy. Love the sleek code for...Wonderful and really easy. Love the sleek code for show hide ul li lists. jQuery is really cool. Love your implementation.Ablezioushttps://www.blogger.com/profile/01900682770817974895noreply@blogger.comtag:blogger.com,1999:blog-7088569370062387759.post-54730572256502434042011-06-22T16:17:47.231+05:302011-06-22T16:17:47.231+05:30Thank you for sharing us this very interesting pos...Thank you for sharing us this very interesting post. It is really informative and recommendable.Double Glazinghttp://www.augustwindows.co.uk/noreply@blogger.com