I'm trying to implement collapsible Bootstrap 4 cards on sidebar widgets, until now I have this:
register_sidebar(
array(
'name' => esc_html__( 'New Sidebar', 'ns' ),
'id' => 'new_sidebar',
'description' => esc_html__( 'New Sidebar', 'ns' ),
'before_widget' => '<div class="card">',
'after_widget' => '</div></div></div><br>',
'before_title' => '<h5 class="card-header mt-0"><a data-toggle="collapse" href="#collapse-example-%1$s" aria-expanded="true" aria-controls="collapse-example-%1$s" id="heading-example" class="d-block">
<i class="fa fa-chevron-down float-right"></i>',
'after_title' => '</a></h5><div id="collapse-example-%1$s" class="collapse show" aria-labelledby="heading-example"><div class="card-body">',
)
);
The problem is that each collapsible container need an unique id to know which one open or close but my problem is in 'before_title'
and 'after_title'
because I'm not able to replace with the id. Anyone can help me with this?