W4 Post List – Collapsible Lists

Open/Collapse is a JavaScript effect. You can achieve this many way, here’s one –

Template:

[groups]
<h4>[group_title]</h4>
<ul>[posts]
<li>[post_date format="Y-m-d"] - [title]</li>
[/posts]</ul>

[/groups]
[nav]

Style -> JavaScript:

(function($){
  $('#w4pl-list-73289').find('h4').click(function(e){
    e.preventDefault();
    $(this).next('ul').slideToggle();
  });
})(jQuery);

i tried to do exactly the same to my list but i really cant find the appropriate way! So if you can please help..
I have this template

<ul class="list-unstyled">
[groups]
<li><h4>[group_title]</h4>
<ol>
[posts]
<li>
[title]
</li>
[/posts]
</ol>
</li>
[/groups]
</ul>

the id of my post list is 585 i replace it in the above javascript code but nothing changed

here is the link of my site with the w4 postlist being on the right side.( Scroll for a bit.) What i want is when i click the year to expand all the post and when i click it again all the post must hide .. At the start no posts must be on sight . Only the years.

i don’t know if it is too much to ask but any help would be appreciated!!

Hello again! I used the template and javascript you provided, and it worked like a charm! One question – Is there any way to have the list default to being collapsed, and then it must be clicked to expand?

Thank you for the plugin, and the response to my earlier question. Below is the page I’m using the plugin on, with a now-collapsible list.

https://introductionsnecessary.com/episode-archive/episodes-date/