How to fix the aria-expanded bootstrap not working in some page

 How to fix the aria-expanded bootstrap not working in some page

This code is working fine almost page, but with the same code another page does not working

When I click to show more error details, I got the scroll event instead of expand the details error.

<style>

    .curly-bracket-error {

        margin-left: 25%;

    }

    .curly-bracket-error h3 {

        color: #d15b47 !important;

    }

    .detail-error {

        color: #ffb752 !important;

        font-style: italic;

        

    }

    .detail-error-content {

        border: 1px solid #d5d5d5;

        color: #D16E6C;

        line-height: 27px;

        float: left;

        font-size: 11px;

        padding: 5px;

        width: 80%;

    }

    [aria-expanded="false"] > .expanded,

    [aria-expanded="true"] > .collapsed {

        display: none!important;

    }

</style>

<section class="curly-bracket-error">

    <h3>

        Encountered error when rendering content.

    </h3>

    <span>

        We apologise for this inconvenience, please contact <a href="mailto:godevstack@gmail.com">godevstack@gmail.com</a> and kindly include the URL and screenshot for further investigation.

        <br>

        Thank you for your assistance. <a id="showMore" class="detail-error" data-toggle="collapse" href="#showMoreDetail" role="button" aria-expanded="false" aria-controls="showMoreDetail">

            <span class="collapsed">

                Show more error details.

            </span>

            <span class="expanded">

                Hide error details.

            </span>

        </a>

    </span>

    <br>

    <span class="collapse detail-error  detail-error-content" id="showMoreDetail">

        Index was outside the bounds of the array.

        <br>

    </span>

</section>

Fixed:

After investigating I found some library was auto binding to the <a> tag, I changed the a tag to the <span>

Change <a> to <span>:

Original 

<a id="showMore" class="detail-error" data-toggle="collapse" href="#showMoreDetail" role="button" aria-expanded="false" aria-controls="showMoreDetail">

            <span class="collapsed">

                Show more error details.

            </span>

            <span class="expanded">

                Hide error details.

            </span>

        </a>

Changed:

<span id="showMore" class="detail-error" data-toggle="collapse" href="#showMoreDetail" role="button" aria-expanded="false" aria-controls="showMoreDetail">

            <span class="collapsed">

                Show more error details.

            </span>

            <span class="expanded">

                Hide error details.

            </span>

        </span>

 

I hope it can help

GoDevStack