Guide to collapsing a Bootstrap v4 accordion by clicking the entire header division

Is there a way to modify the Bootstrap v4 accordion so that it collapses when the entire area of the div is clicked, rather than just the text section?

Below is the code for the Bootstrap accordion:

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>
htmlcssbootstrap-4twitter-bootstrap-4

Answer №1

Just add the data-target attribute to the header divs.

<div class="card-header" role="tab" id="headingOne" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
     <h5 class="mb-0">
        <a href>
           Collapsible Group Item #1
        </a>
     </h5>
</div>

http://www.example.com/go/d6JKmPeONq

Answer №2

Include this style in your CSS

.mb-0 > a {
  display: inline-block;
  width: 100%;
  padding:0.75rem 1.25rem;
}
.card-header {
  padding:0;
}

Experiment with the demo by running the snippet and selecting full-screen view

.mb-0 > a {
  display: inline-block;
  width: 100%;
  padding:0.75rem 1.25rem;
}
.card-header {
  padding:0;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="395b56564d4a4d4b5849790d17091709">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha256-LA89z+k9fjgMKQ/kq4OO2Mrf8VltYml/VES+Rg0fh20=" crossorigin="anonymous">
<style>

.mb-0 > a {
  display: inline-block;
  width: 100%;
  padding:0.75rem 1.25rem;
}
.card-header {
  padding:0;
}

</style>
<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24464b4b50575056455464100a140a14">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha256-5+02zu5UULQkO7w1GIr6vftCgMfFdZcAHeDtFnKZsBs=" crossorigin="anonymous"></script>

Answer №3

Switching up the anchor order seems to be the most straightforward solution I've come across.

It's worth noting that bootstrap version 4 is currently in alpha release, and some users have reported encountering script errors.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>



<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
  <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    <div class="card-header" role="tab" id="headingOne" >
      <h5 class="mb-0">
        
          Collapsible Group Item #1
        
      </h5>
    </div>
</a>
    <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="card">
      <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
    <div class="card-header" role="tab" id="headingTwo" data-toggle="collapse" data-parent="#accordion">
      <h5 class="mb-0">
    
          Collapsible Group Item #2
        
      </h5>
    </div>
    </a>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

Answer №4

Bootstrap's latest update, version 4.3, introduces the convenient .stretched-link utility class. This allows you to easily apply the .stretched-link class to a link and add .position-relative to the card header.

Here is an example using the mentioned technique:

<div id="accordion" role="tablist" aria-multiselectable="true">
  <div class="card">
    <div class="card-header position-relative" role="tab" id="headingOne">
      <h5 class="mb-0">
        <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" class="stretched-link">
          Collapsible Group Item #1
        </a>
      </h5>
    </div>

    <div id="collapseOne" class="collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header position-relative" role="tab" id="headingTwo">
      <h5 class="mb-0">
        <a class="collapsed stretched-link" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="card-block">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>
</div>

You can find detailed documentation on this feature in the official Bootstrap documentation, as well as additional examples.

Answer №5

I made the switch to using simple HTML5 Details control instead of Accordion for my FAQ page after testing it with 1000 questions. The efficiency and ability to compare 2 answers were key factors in this decision, as well as encountering issues with the Accordion when working with a large number of items. You can check out the details here.

If you want to see this solution in action on a real website, visit: 

<details>
<summary>
  Need help with your indoor fan running constantly?</summary>
If your indoor fan is running continuously, try switching it from “On” to “Auto” mode.
</details>
<details>
<summary>
  Is it better to keep the thermostat fan setting on “On” or “Auto”?</summary>
Having the fan set to “On” will provide constant air filtering and even temperature throughout your home. However, if humidity is an issue, switch it to “Auto.”
</details>
<details>
<summary>
  Wondering about the lifespan of your furnace or air conditioner?</summary>
Modern heating and cooling equipment lasts longer than ever, depending on factors like energy efficiency and repair costs versus replacement costs.
</details> <hr>    
<button type="button" id="hdn" class="btn btn-primary" onClick="window.location.reload();">Collapse All</button>

<style>
#hdn{display:none; visibility:visible}
</style>

<script>
$(function() {$('summary').click(function() {if($('#hdn').css("display") == "none"){$('#hdn').show();}});});
</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Animating the scroll - Transform the image on scroll to give the illusion of rotation

Currently working on a project for a client who wants the product they are selling to rotate as the user scrolls, similar to the effect seen on the Apple website: I have a folder filled with different frames of the rotating product. I'm uncertain abo ...

jqueryhtmlcssscroll

Grid items displaying incorrectly due to text alignment issues

I'm facing an issue where I need to separate text and the money part, and also align the text in a way that when viewed in smaller text sizes, the money part moves to the next line. .outdoor-card { display:flex; flex-wrap: wrap; width: 100%; ...

htmlcssbootstrap-4

CSS navigation not working properly in Internet Explorer 7

I am struggling to get this script to function properly in IE 7, as the navigation menu is CSS3-based and breaks completely after using Modernizer. Check out an example on this fiddle Modernizer did not fix the problem, so I'm considering if I need ...

jqueryhtmlcss

Show data from html input using PHP

Here is the HTML and PHP code I have been working on. I am trying to display the inputted data, but I am not getting any output. Can you help me identify what is wrong with my code? HTML <form action="welcome.php" method="POST"> <fieldse ...

phphtml

Learn how to incorporate a HTML page into a DIV by selecting an Li element within a menu using the command 'include('menu.html')'

I have a website with both 'guest' and 'user' content. To handle the different menus for logged-in and logged-out users, I created menuIn.html and menuOut.html files. These menus are included in my MainPage.php using PHP logic as sugges ...

javascriptphpjquerycssajax

The importance of color value is underscored

Is there a way to remove the surrounding color from the value in Visual Studio Code and only display the little square on the left side? [.nav-link-wrapper a { color: #ec0b0b } ] https://i.stack.imgur.com/5uA9k.png ...

cssvisual-studio-codecolors

How to align an unordered list horizontally in HTML without knowing the number of items

I'm currently developing a web page that needs to display an unknown number of items using the ul/li HTML tag. Here are my requirements: The list should utilize as much horizontal space as possible The list must be horizontally centered, even if lin ...

javascripthtmlcss

The parent element is not able to apply the CSS text-decoration in jQuery

Is there a way to retrieve a specific CSS property of an element, even if it is inherited from its parent? The standard jQuery method .css() can help with this. Consider the following HTML structure: <div id="container"> some text<br> ...

jquerycsstext-decorations

Place unchangeable elements both preceding and following an input field

At first glance, this question bears a striking resemblance to this specific one. However, the original poster indicated that it remains unanswered, prompting me to inquire about its feasibility and implementation. Here is what I aim to achieve: I am seek ...

htmlcssreactjsjsx

Using Javascript to place an image on top of another image (specifically for a close button)

I need help figuring out how to overlay a close icon image on top of another image using JavaScript. Specifically, I want to position the close icon in the top right corner of the image. Current code snippet: function drawImages(imagevalue){ var ar ...

javascripthtmlimage

Navigate to the element and retrieve a null offset

Currently, I am attempting to retrieve an element's ID from a select box and then scroll to that specific element using the following code snippet: // move to services $(function () { $("select.jump").change(function() { var selected = $( ...

jqueryhtml

jQuery highlight not working properly with versions 1.8.2 of jQuery and custom 1.8.24 of jQuery

Currently, I have the jQuery UI installed on my website with jquery 1.8.2 and jquery custom 1.8.24 versions. I cannot seem to figure out why the following code for a jQuery highlight effect is not functioning properly: $(document).ready(function () { ...

javascriptjqueryhtmljquery-effects

What is the best way to set the title of the <span>/<div> tag in order for it to display the <br/> tag in the content and show a tooltip on separate lines?

I have this AngularJS code sample that reads the HTML tag within the data and displays the content on the screen with the following message: Hi Mike! Good Morning!!! I need to modify it so that the title or tooltip also shows the content in two separa ...

javascriptjqueryhtmlcssangularjs

What is the method to fetch the index and remove an element from an object in angular 8?

I've been attempting to remove an element from an object, but for some reason it's not getting deleted. The format of my object is as follows: {"UNDET":0,"HLDS":8,"NGS":2,"NGRT":1,"TotalCount":13,"NGX":1} What I'm looking to do now is del ...

htmlangulartypescriptangular8

Utilizing JavaScript and its scope to include text within an HTML document

I am currently working on a program that receives input from the user twice, specifically a risk carrier and a sum (although it is just a placeholder for now), groups these two values together, and then repeats the contents in a loop. You can see the progr ...

javascripthtmlarrays

Prevent all elements sharing the same class from expanding upon clicking if their parent element

Currently, I have implemented a function as a click event callback on a button. The purpose of this function is to toggle the class and provide a dropdown effect when the button is clicked. While this functionality works perfectly when the dropdown element ...

javascriptjqueryhtmlcss

Choosing between Ajax and Websockets for sending small amounts of dataOR

I am currently developing a chat website that utilizes Websockets (Socket.io) to facilitate communication between users and the server. While Websockets are essential for sending and receiving messages in real-time, I am facing a challenge when it comes to ...

javascripthtmlajaxwebsocketsocket.io

Submit form data to MongoDB upon submission

In my node express setup, I have integrated functionality to store values entered in checkboxes and text areas into a MongoDB database. Initially, users could calculate a score by clicking a button associated with checkboxes, and then post the information ...

javascripthtmlmongodbrestexpress

Using CSS to implement a star rating system in PHP HTML can yield impactful results

<div class=" rating "> <input type="radio" id="star2" name="rating" value="2" /><label for="star2" disabled title="Sucks big tim">2 stars</label> </div> I have successfully implemented a star rat ...

phphtmlcss

Command Internet Explorer 9 to disregard media queries and instead adhere to the minimum width rule

Is there a way to prevent IE9 from recognizing media queries or following min-width? I have created a responsive design for mobile devices using media queries on my website, and they function perfectly in modern browsers. However, some users still use old ...

css