Used below bootstrap accordion example. functionality of accordion works fine.

When user expanded first accordion and click second accordion. First accordion should not close. But, it closes first accordion when user clicked second accordion.

Expand/collapse of accordion have to be manually open/close.

Not sure whether need to update JS or CSS to fix this issue. Please guide me to find a solution.

Thanks

$('.collapse.show').each(function(){
      $(this).prev('.card-header').find('.fa').addClass('fa-minus').removeClass('fa-plus');
    });
    
    // Toggle plus minus icon on show hide of collapse element
    $('.collapse').on('show.bs.collapse', function(){
      $(this).prev('.card-header').find('.fa').removeClass('fa-plus').addClass('fa-minus');
    }).on('hide.bs.collapse', function(){
      $(this).prev('.card-header').find('.fa').removeClass('fa-minus').addClass('fa-plus');
    });

<div class="accordion" id="accordionExample">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h2 class="mb-0"><button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"><i class="fa fa-plus"></i> What is HTML?</button></h2>
        </div>
        <div class="collapse" id="collapseOne" aria-labelledby="headingOne" data-parent="#accordionExample">
            <div class="card-body">
                <p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingTwo">
            <h2 class="mb-0"><button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo"><i class="fa fa-plus"></i> What is Bootstrap?</button></h2>
        </div>
        <div class="collapse" id="collapseTwo" aria-labelledby="headingTwo" data-parent="#accordionExample">
            <div class="card-body">
                <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
</div>

Used below bootstrap accordion example. functionality of accordion works fine.

When user expanded first accordion and click second accordion. First accordion should not close. But, it closes first accordion when user clicked second accordion.

Expand/collapse of accordion have to be manually open/close.

Not sure whether need to update JS or CSS to fix this issue. Please guide me to find a solution.

Thanks

$('.collapse.show').each(function(){
      $(this).prev('.card-header').find('.fa').addClass('fa-minus').removeClass('fa-plus');
    });
    
    // Toggle plus minus icon on show hide of collapse element
    $('.collapse').on('show.bs.collapse', function(){
      $(this).prev('.card-header').find('.fa').removeClass('fa-plus').addClass('fa-minus');
    }).on('hide.bs.collapse', function(){
      $(this).prev('.card-header').find('.fa').removeClass('fa-minus').addClass('fa-plus');
    });

<div class="accordion" id="accordionExample">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h2 class="mb-0"><button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"><i class="fa fa-plus"></i> What is HTML?</button></h2>
        </div>
        <div class="collapse" id="collapseOne" aria-labelledby="headingOne" data-parent="#accordionExample">
            <div class="card-body">
                <p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://www.tutorialrepublic./html-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingTwo">
            <h2 class="mb-0"><button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo"><i class="fa fa-plus"></i> What is Bootstrap?</button></h2>
        </div>
        <div class="collapse" id="collapseTwo" aria-labelledby="headingTwo" data-parent="#accordionExample">
            <div class="card-body">
                <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="https://www.tutorialrepublic./html-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
</div>

• javascript
• jquery
• twitter-bootstrap

1 Answer 1

In order to prevent first accordions to close when clicking on second ones, you only have to remove the data-parentattribute in the HTML part of your code snippet.

<div class="accordion" id="accordionExample">
    <div class="card">
        <div class="card-header" id="headingOne">
            <h2 class="mb-0"><button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"><i class="fa fa-plus"></i> What is HTML?</button></h2>
        </div>
        <div class="collapse" id="collapseOne" aria-labelledby="headingOne">
            <div class="card-body">
                <p>HTML stands for HyperText Markup Language. HTML is the standard markup language for describing the structure of web pages. <a href="https://www.tutorialrepublic./html-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
    <div class="card">
        <div class="card-header" id="headingTwo">
            <h2 class="mb-0"><button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo"><i class="fa fa-plus"></i> What is Bootstrap?</button></h2>
        </div>
        <div class="collapse" id="collapseTwo" aria-labelledby="headingTwo">
            <div class="card-body">
                <p>Bootstrap is a sleek, intuitive, and powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="https://www.tutorialrepublic./html-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
</div>