|
Bootstrap 5 provides a convenient way to create collapsible accordion elements. However, by default, accordion buttons receive an outline when focused for accessibility reasons. In some cases, you might want to remove this outline for aesthetic purposes, while ensuring that your website remains accessible.
Remove Outline from Accordion Buttons using Custom CSSThe basic method to remove the outline from Bootstrap 5 accordion buttons is by adding custom CSS to target the .accordion-button class and set the outline property to none.
Example: Demonstrating the use of Bootstrap 5 to create an accordion interface with collapsible sections for displaying information about programming languages like C++ and Java.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Accordion Example</title>
<link rel="stylesheet"
href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<style>
.accordion-button:focus {
outline: none;
box-shadow: none;
}
</style>
</head>
<body>
<h1 class="text-success text-center">
GeeksforGeeks
</h1>
<h2 class="text-center">Bootstrap 5 Accordion</h2>
<div class="container mt-5">
<div class="accordion accordion-flush mt-4"
id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo">
C++
</button>
</h2>
<div id="collapseTwo"
class="accordion-collapse collapse"
aria-labelledby="headingTwo"
data-bs-parent="#accordionExample">
<div class="accordion-body">
C++ is a high level programming
language used for developing
applications, games, etc.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapseOne"
aria-expanded="false"
aria-controls="collapseOne">
Java
</button>
</h2>
<div id="collapseOne"
class="accordion-collapse collapse"
aria-labelledby="headingOne"
data-bs-parent="#accordionExample">
<div class="accordion-body">
Java is a programming language
that is used in modern
development worldwide.
</div>
</div>
</div>
</div>
</div>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Output:
Remove Outline from Accordion Buttons using shadow-none classThe .shadow-none utility class is used to remove the box shadow that appears when an accordion button is focused. While this won’t remove the outline, it will reduce the focus indicator’s visibility.
Example: Demonstrating the use of Bootstrap 5 to create an accordion interface with collapsible sections for displaying information about programming languages like C++ and Java.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Accordion Example</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<h1 class="text-success text-center">
GeeksforGeeks
</h1>
<h2 class="text-center">Bootstrap 5 Accordion</h2>
<div class="container mt-5">
<div class="accordion accordion-flush mt-4"
id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed shadow-none"
type="button" data-bs-toggle="collapse"
data-bs-target="#collapseTwo"
aria-expanded="false"
aria-controls="collapseTwo">
C++
</button>
</h2>
<div id="collapseTwo"
class="accordion-collapse collapse"
aria-labelledby="headingTwo"
data-bs-parent="#accordionExample">
<div class="accordion-body">
C++ is a high level programming
language used for developing
applications, games, etc.
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button collapsed shadow-none"
type="button" data-bs-toggle="collapse"
data-bs-target="#collapseOne"
aria-expanded="false"
aria-controls="collapseOne">
Java
</button>
</h2>
<div id="collapseOne"
class="accordion-collapse collapse"
aria-labelledby="headingOne"
data-bs-parent="#accordionExample">
<div class="accordion-body">
Java is a programming language
that is used in modern
development worldwide.
</div>
</div>
</div>
</div>
</div>
<script src=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js">
</script>
</body>
</html>
Output:
|
.png){kind=small}
