Looking for accordion or some other option of collapsable links

  • I’m looking for accordion or some other solution to hide and show links in hierarhical way. Example:

    1. LINK TO PAGE 1 +
      1.1 LINK TO PAGE 2
      1.2 LINK TO PAGE 3

    1.1 and 1.2 should be hidden, and they should be visible only if clicked + sign on the right (or left side) of first LINK. I started to look for some accordion plugin but usually in accordion plugins we have an option to place links under the top tittle accordion name, but the accordion tittle itself is usually not link, but I need that. It seems simple, but I just can not find a solution.

    Also, it would be nice to have an option to edit properties of the links text, so I can make it in bold for example.

    Is it doable?

Viewing 1 replies (of 1 total)
  • Moderator bcworkz

    (@bcworkz)

    Almost anything is possible if you’re willing to custom code a solution. In general, a JS event listener is assigned to each +. On a click event, the script alters the CSS visibility of the related section, toggling between visible and hidden. The 1. Title needn’t even be part of the scheme, it’s really just an unrelated element.

    Here’s a simple example. You can edit it and click the Run > button to see the result. To implement your specific need, move the “Open Section 1” text to in front of the <button> tag and place a “+” as the button text. You can make “Open Section 1” into a link if you like, it doesn’t matter in the example.

    You’re free to adapt the example code and use it on your site. Note there is also an external CSS file involved that is much more extensive than you’d need. You’re better off extracting the applicable CSS by using your browser’s element inspector tool. You’d mainly be interested in the w3-hide and w3-show class properties. Be aware though that you cannot effectively place inline <script> block within the WP editor. Scripts should either reside in an external file and be enqueued, or injected into content via shortcode.

Viewing 1 replies (of 1 total)
  • The topic ‘Looking for accordion or some other option of collapsable links’ is closed to new replies.