Collapsing Sections on a Page Not Working

The theme script is not hiding them initially as you would expect in an accordion plugin, for example. So you need to add something like this:

$('ul.basic.accordion li p').hide(0);

Where do I put that code? Into the CSS? I tried, but nothing changed.

It’s JavaScript not CSS. But it could be done with CSS and, now that I think about it, that may be how the theme was meant to work.

Try this CSS:

ul.basic.accordion li p { display: none; }

That code is actually already in the theme CSS file. I’m starting to think it’s the way the page code is setup: https://gist.github.com/anonymous/f6a952c0ac2f59e5ee226a60695b66d6

This is the code for the ‘Ann Arbor Support Group’ at the top of the page. I didn’t originally put this code in, but it doesn’t look right to me. Any thoughts? (And thank you for your help!)

This is the code in the CSS if that’s helpful: https://gist.github.com/anonymous/bc3d5a71318361543b9fb56f5f342d84

Thanks, I see now. I should have dug a little deeper at first.

Your HTML is not nested properly so the correct <p>‘s are not being included.

There should be one parent <ul> and multiple direct descendant <li>‘s like so:

<ul class="basic accordion">;
  <li><a></a>
    <h3 title="Ann Arbor">? JNF Ann Arbor Support Group - East Ann Arbor Heath Center</h3>;
    ...
  </li>
  <li>...</li>
  <li>...</li>
  ...
</ul>

Make sense?

• This reply was modified 7 years, 5 months ago by Chris Dillon. Reason: formatting