I'm implementing bootstrap theme into wordpress and i need you'r help. In Wordpress i created a simple page with paragraph and a list of 3 item's.

Product list one

• Product one - Link
• Product two - Link
• Product three - Link

with a help of bootstrap i'm trying to integrate accordion (collapsible content) into that Wordpress page. But i can't understand how to bind each element from the_content(); into specific div. I think i need to use apply_filters with foreach to create a new div's for each paragraph's/list's ?

Example what im trying to achieve - /

I'm implementing bootstrap theme into wordpress and i need you'r help. In Wordpress i created a simple page with paragraph and a list of 3 item's.

Product list one

• Product one - Link
• Product two - Link
• Product three - Link

with a help of bootstrap i'm trying to integrate accordion (collapsible content) into that Wordpress page. But i can't understand how to bind each element from the_content(); into specific div. I think i need to use apply_filters with foreach to create a new div's for each paragraph's/list's ?

Example what im trying to achieve - https://jsfiddle/ufr49jg2/

• php
• functions
• filters
• the-content
• twitter-bootstrap

• 1 probably should look at creating a shortcode for this that you can pass the product IDs to and use it to output the desired markup – majick Commented Oct 4, 2019 at 11:22

1 Answer 1

As majick suggested on a comment you could use a shortcode to create the accordion markup.

If you want to manually define the tab titles and content, you could add something like this to your functions.php.

add_shortcode( 'accordion', 'accordion_callback' );
function accordion_callback( $args, $content ) {

  $defaults = array(
    'id' => 'exampleAccordion'
  );
  $args = shortcode_atts( $defaults, $args, 'accordion' );

  return sprintf(
    '<div id="%s" class="accordion">%s</div>',
    $args['id'],
    do_shortcode($content)
  );  
}

add_shortcode( 'accordion_tab', 'accordion_tab_callback' );
function accordion_tab_callback( $args, $content ) {

  $defaults = array(
    'title' => 'Default tab title',
  );
  $args = shortcode_atts( $defaults, $args, 'accordion_tab' );

  $tab_heading = '<div class="card-header">' . $args['title'] . '</div>';
  $tab_content = '<div class="collapse">' . $content . '</div>';

  return '<div class="card">' . $tab_heading . $tab_content . '</div>';
}

You'd then use these like this in your post content,

[accordion id="my-accordion"]
[accordtion_tab title="Tab 1"]Tab 1 content[/accordtion_tab]
[accordtion_tab title="Tab 2"]Tab 2 content[/accordtion_tab]
[/accordion]

Or if your tab content consists of separate posts, you could pass the post ID's as the shortocde parameter and build the accordion markup based on the found post data. For example,

add_shortcode( 'accordion_products', 'accordion_products_callback' );
function accordion_products_callback( $args ) {

  $defaults = array(
    'products' => ''
  );
  $args = shortcode_atts( $defaults, $args, 'accordion_products' );

  $products = explode( ',', $args['products'] );
  $products = array_map('absint',$products);

  $accordion = '';
  foreach ( $products as $product_id ) {
    // get product data, e.g get_post(), or wc_get_product() if working with WooCommerce
    // create tab html
    // concat html to $accordion
  }

  return $accordion; 
}

Then use the shortcode like this,

[accordion_products products="1,2,3,4,5"]

A variation of this option is to group the posts with (custom) taxonomy terms, where each term represents one accordion. Then pass the ID of one of the terms as a shortcode parameter and query posts based on the term id.

N.B. The examples above are simplified and you should only use them as a starting point and modify them to match your exact needs. But feel free to post new questions to WPSE, if you encounter any problems while developing the solution.