Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I want it to be fairly easy for the post author to setup an accordion, based on header tags. So for example this:

<h3>Headline 1</h3>
<p>Content.. lorem ipsum</p>

<h3>Headline 2</h3>
<p>Content.. lorem ipsum</p>

<h3>Headline 3</h3>
<p>Content.. lorem ipsum</p>

would be converted to this (and so, accordion is activated)

<div class="accordion">
<h3>Headline 1</h3>
<div><p>Content.. lorem ipsum</p></div>
<h3>Headline 2</h3>
<div><p>Content.. lorem ipsum</p></div>
<h3>Headline 3</h3>
<div><p>Content.. lorem ipsum</p></div>
</div>

I've been using a setup with shortcodes — but this gets too complicated for the post author — so a more streamlined solution would be grand. Any ideas how I would go about doing this?

share|improve this question
add comment

1 Answer

You can use shortcode function to do this.

function accordion_shortcode( $atts, $content = null ) {
   extract( shortcode_atts( array(
      'class' => 'accordion',
      ), $atts ) );

   return '<div class="' . esc_attr($class) . '">' . $content . '</div>';
}

add_shortcode( 'accordion', 'accordion_shortcode' );

In editor you wrap your content:

[accordion]
<h3>Headline 1</h3>
<p>Content.. lorem ipsum</p>

<h3>Headline 2</h3>
<p>Content.. lorem ipsum</p>

<h3>Headline 3</h3>
<p>Content.. lorem ipsum</p>
[/accordion]
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.