Posting in the Magento forums has been disabled pending the implementation of a new and improved forum solution which should better serve the community.

For new questions please post at magento.stackexchange.com, the community-run support site for the Magento community. We will be providing updates on the new forum solution soon. For questions or concerns please email community@magento.com.

Magento Forum

Jquery accordion menu - Collapsible
 
Tizzalicious
Member
 
Avatar
Total Posts:  42
Joined:  2011-05-28
 

I just made an accordion menu for my layered navigation using the instructions here: http://www.xpressbangla.com/create-accordion-menu-for-magento-layered-navigation/

It worked, but there are a few things I want different.

- I want it to be completely collapsed when entering the page (with the code above the first item is expanded)
- I want more items to be able to be expanded at the same time
- I want items to collapse again when clicking on the attribute name again

I already played around with it a little, and changed the code so it now looks like this:

<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function(){
jQuery
("dl#narrow-by-list> dd:visible(:first)").hide();
jQuery("dl#narrow-by-list> dt a").click(function(){
jQuery
("dl#narrow-by-list> dd:visible").slideUp("fast");
jQuery(this).parent().next().slideDown("fast");
return 
false;
});
});
/* ]]> */
</script>

The first “visible” used to say “not”, I changed this to stop the first item from always being expanded. It works, but I don’t know if it messed up for the other things I want, since I don’t really understand the coding, and I just played around with it to see what would happen.

Does anyone know how to fix the code to make it do the other things I would like? It shouldn’t be too hard I assume, I just don’t know anything about this :S

And for a bonus question, if anyone could tell me how to get an arrow image or anything like that next to the attribute titles (on the right),that would be great smile (Especially if the arrow would point down when the item is expanded!)

Thanks!

 
Magento Community Magento Community
Magento Community
Magento Community
 
Tizzalicious
Member
 
Avatar
Total Posts:  42
Joined:  2011-05-28
 

I am still looking for someone who can help me with this...Anyone?

 
Magento Community Magento Community
Magento Community
Magento Community
 
cooper
Sr. Member
 
Total Posts:  104
Joined:  2008-03-31
 

Try this code :

<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function(){
jQuery
("dl#narrow-by-list> dd").hide();
jQuery("dl#narrow-by-list> dt").click(function(){
jQuery
(this).next("dd").slideToggle('fast');
});
});
/* ]]> */
</script>
and in view.phtml do not change the “dt” line.
 
Magento Community Magento Community
Magento Community
Magento Community
 
mooshi
Sr. Member
 
Avatar
Total Posts:  88
Joined:  2009-07-25
Australia
 

hi there!!

Try this tut..works like a dream. 

lotus blog

hope this helps

 
Magento Community Magento Community
Magento Community
Magento Community
 
kdtips
Member
 
Avatar
Total Posts:  73
Joined:  2011-08-13
Auckland New Zealand
 

TRy this extention


goo.gl/2Iu8f

This extension does it as you want

 
Magento Community Magento Community
Magento Community
Magento Community
 
Coleo
Jr. Member
 
Total Posts:  2
Joined:  2013-01-29
 

I know this is a little late in coming but I edited cooper’s code to get it to work for me.

<script type="text/javascript">
/* <![CDATA[ */
jQuery(document).ready(function(){
jQuery
("dl#narrow-by-list> dd").hide();
jQuery("dl#narrow-by-list> dt").click(function(){
jQuery
(this).next("dd").slideToggle("fast");
return 
false;
});
});
/* ]]> */
 
Magento Community Magento Community
Magento Community
Magento Community
Magento Community
Magento Community
Back to top