Using bootstrap collapse cards in python and streamlit

Question

I have a streamlit app that i want to display the returned result as cards using bootstrap cards for this i am using st.markdown().

The problem is that once the user click the button the cards displayed are not collapsed and are always expanded. So my question how to make these cards collapse and expand on selection or i can use use cards with multiple TABS.

I know that bootstrap use the ID of the div but i do now know how to use it with streamlit.

this is what it display

the code below I wrote an example and not the true data.

code:

def card(ID,name,nickname,mother_name,v1,v2,v3):
    return f'''
            <div class="card">
                <h5 class="card-header">
                    <a data-toggle="collapse" href="#collapse-example" aria-expanded="False" aria-controls="collapse-example" id="heading-example" class="d-block">
                        <i class="fa fa-chevron-down pull-right"></i>
                        Collapsible Group Item #1
                    </a>
                </h5>
                <div id="collapse-example" class="collapse show" aria-labelledby="heading-example">
                    <div class="card-body">
                        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon
                        officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3
                        wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et.
                        Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan
                        excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt
                        you probably haven't heard of them accusamus labore sustainable VHS.
                    </div>
                </div>
            </div>
            '''

st.markdown("""
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

""",unsafe_allow_html=True)

def main():
    if radioDB=="Search":
        df_result_search = pd.DataFrame()
        with st.sidebar.form(key='search_form',clear_on_submit= False):
            regular_search_term=st.text_input("Enter Search Term")
            if st.form_submit_button("search"):
                df_result_search = df[df['name'].str.contains(regular_search_term)|
                df['nickname'].str.contains(regular_search_term)|
                df['mother_name'].str.contains(regular_search_term)]

        rec = int(df_result_search.shape[0])
        st.write(f"{str(df_result_search.shape[0])} Records ")
        num_rows = max(1, math.ceil(rec/4))

        dv = 'inherit'
        cards = []

        for index ,row in df_result_search.iterrows():
            v1 = dv if row[1] is not None else 'none'
            v2 = dv if row[2] is not None else 'none'
            v3 = dv if row[3] is not None else 'none'
            cards.append([
                            row[0],    
                            row[1],
                            row[2],
                            row[3],
                            v1,v2,v3])
        # Show the card data.
        if len(cards):
            for _ in range(num_rows):
                num_cols = min(5, max(1, rec))
                c = st.columns(num_cols)
                for m in range(num_cols):
                    if len(cards):
                        mycard = cards.pop(0)
                        c[m].markdown(card(*mycard), unsafe_allow_html=True)