I'm trying to implement collapsible Bootstrap 4 cards on sidebar widgets, until now I have this:

            '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?

  • you are close two </div></div><br> why? – vikrant zilpe Nov 30 '18 at 5:47
  • To close <div class=card"> and <div id="collapse-example-%1$s"> and <div class="card-body"> – Elros Romeo Nov 30 '18 at 12:23
  • And the <br> is to add a space between widgets – Elros Romeo Dec 1 '18 at 2:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.