6 {{ upvoteCount | shortNum }}
6 {{ upvoteCount | shortNum }}

Accordian/Collapsible div in WP

by TheNightOwl
4 replies
Hey there, Warriors

Hoping that Wordpress/jQuery/Ajax code-monkey Warriors might be able to help out...

I'd like to add collapsible sections right within my posts, but I don't know how to do it.

I've found tutorials for 3-tiered nav-menus using this effect, but I'd just like a single section in a WP post (so I can reveal the answer to a question posed in the post).

Also, I'm pretty sure WP won't let you run js in posts, right? I presume there are ways to override this using plugins... but I'm concerned about the security implications.

So my questions are:

1. Would anyone be able to direct me to a tutorial or plugin showing me how to do it, please?

2. What are the security risks and how might I mitigate against them?


Thanks very much!

Best,
TheNightOwl
#accordian #accordian or collapsible #collapsible div #div #jquery
  • Profile picture of the author theIMgeek
    Here's some self-contained code to do what I think you've asked. The second DIV remains hidden until the "reveal" link is clicked.

    You can put as many of these as needed in a post, but you must change the hidden-answer-1 to hidden-answer-2, -3, etc. (in both the link and the hidden div)

    HTML Code:
    <span onclick="document.getElementById('hidden-answer-1').style.display = 'block';" style="color: red; font-weight: bold; cursor: help;">Click to reveal answer</span>

<div id="hidden-answer-1" style="display: none; border: dashed 2px #CCC; padding: 5px; background-color: #FFF68F;">
This is the secret answer!
</div>
    I tested this in WordPress, but I use the straight HTML editor (not WYSIWYG) so you'll have to make sure that you flip over to code-editing mode when you paste this in.

    -Ryan
    Signature
    FREE WSO: Protect and Automatically Deliver Your Digital Products

    Ask the Internet Marketing Geek     <-- Happy to help with technical challenges
    MiniSiteMaker.org <-- Free software to make your mini-sites fast and easy
    {{ DiscussionBoard.errors[1988224].message }}
  • Profile picture of the author Christopher Airey
    There shouldn't be any security risks as long as the comments don't allow HTML and you're not granting blog post access to individuals who want to hurt your website.
    {{ DiscussionBoard.errors[1989434].message }}
  • Profile picture of the author TheNightOwl
    Thanks guys, especially Ryan, for that gloriously simple piece of code, which worked a treat straight out of the box! Yay to that.

    Did some tooling around with the styles and within just a little while had on my blog EXACTLY what I was imagining in my head.

    Thanks again. Totally awesome.

    All the best,
    TheNightOwl
    Signature
    {{ DiscussionBoard.errors[1991139].message }}
    • Profile picture of the author TheNightOwl
      As an add-on...

      I just found this tidy little plugin:

      Peter's Literal Comments

      It'll stop special characters being entered into your comment form, but you can edit a post and add HTML to it from the Admin panel if you want to.

      It's a real sweet plugin in my opinion!
      Signature
      {{ DiscussionBoard.errors[1991428].message }}

Trending Topics