In-page collapsable table of contents?

  • Resolved Esjitu

    (@esjitu)


    10 years, 1 month ago

    Hello, I’m trying to make a sort of wiki on my site and am having some trouble getting a collapsable table of contents. I’ve got a template all set and am quite happy with the way my contents box looks – but all attempts I have made to get the thing to expand/collapse on a toggle have failed.

    https://wp.ignoland.com/?page_id=46

    I use a plugin that can add custom per-page CSS and javascript, and while the CSS function works perfectly, I’ve yet to plug in any working javascript I’ve found…the only pure CSS solution I found to have a toggle was the ‘checkbox hack’ (https://css-tricks.com/the-checkbox-hack/) but attempting that broke the layout of the page (I assume because it hides the checkbox offscreen and WP couldn’t process that?). Is there any method I can use to create a ‘show/hide’ link inside my existing contents box, ala Wikipedia? I want text to continue to be able to wrap around the infobox/contents box areas whether the contents is shown or hidden. Worst case scenario I’ll just suck it up and deal with a non-hidable contents…but ideally I’d like to be able to make it toggle.

Viewing 6 replies - 1 through 6 (of 6 total)

  • Hi Esjitu,

    I have a simple shortcode plugin that includes a toggle shortcode called Rescue Shortcodes that you might be interested in. For example, once you install and activate the plugin, paste the shortcode below into your page content and enter the information as you’d like it to appear within the toggle box:

    [rescue_toggle title=”This Is Your Toggle Title”] Sample Content [/rescue_toggle]

    https://github.com/RescueThemes/rescue-shortcodes

    There are other shortcode plugins that offer toggles as well.

    Thread Starter Esjitu

    (@esjitu)

    Is there a way I can use the shortcode without having it push down to the bottom of my infobox? For instance, in my test, I have the shortcode inserted after the first two Lorem Ipsum paragraphs, but then there’s all this blank space between the infobox and where it inserts the toggle:

    https://wp.ignoland.com/?page_id=46

    Is it possible to style the toggle so the width and position change to match the position on the page? Something like this:

    View post on imgur.com

    Otherwise it leaves a lot of empty space on the page.

    Sure, try aligning it left or adding custom CSS to float:

    .rescue-toggle { float: left; }

    Thread Starter Esjitu

    (@esjitu)

    That worked perfectly, thank you!! I didn’t know you could add custom styling to shortcodes.

    Thread Starter Esjitu

    (@esjitu)

    -Resolved-

    Thread Starter Esjitu

    (@esjitu)

    Oh, one last question – is it possible to set the toggle to be expanded by default, and toggled closed?

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘In-page collapsable table of contents?’ is closed to new replies.