javascript - How to add plus minus symbol to a basic accordion using jquery? -
i'm using basic jquery accordion written luca filosofi this thread. here version:
$('.product-details .post-body dl dt').on('click', function (e) { e.preventdefault(); $(this).parent('dl').children('dd:visible').slideup('fast'); $(this).nextuntil('dt').filter(':not(:visible)').slidedown('fast'); });
the script works perfectly. however, don't know how have plus , minus text (+
, -
) attached before title (e.g: + title) based if content shown or not.
i have following permanent markup , must stay is. must not add more class or html, except via jquery:
<dl> <dt>title</dt> <dd>description 01</dd> <dd>description 02</dd> <dt>title</dt> <dd>description 01</dd> <dd>description 02</dd> <dd>description 03</dd> </dl>
you toggle icons when click this:
$('.product-details .post-body dl dt').on('click', function (e) { e.preventdefault(); $(this).parent('dl').children('dd:visible').slideup('fast'); $(this).nextuntil('dt').filter(':not(:visible)').slidedown('fast'); $(this).closest('i').toggleclass("icon-circle-plus icon-circle-minus"); });
Comments
Post a Comment