Accordion Widget in Bootstrap fails to initiate with proper icon

I recently designed a webpage showcasing different parts of a privacy policy. Using Bootstrap and its accordion feature, I successfully displayed the information with standard icons. However, I encountered an issue where the accordion initially loads with minus icons displayed instead of the desired plus icons.

Upon expanding the item, the collapse (minus) icon is correctly shown, but upon collapsing it, the plus icon should be displayed. This discrepancy has left me puzzled as I am not well-versed in CSS/HTML. Despite referencing resources and implementing what should work in the CSS, the icons still do not display as intended.

The icons used were converted from SVG format using a URL encoder tool. Additionally, the CSS file I referenced to create the accordion icons can be found in a tutorial linked here.

Below is a snippet of the CSS code responsible for changing the accordion icons:

.accordion {
    --bs-accordion-btn-bg: #e5e7eb;
    --bs-accordion-active-bg: #e5e7eb;
    --bs-accordion-bg: #e5e7eb;
    margin-bottom: 0.5rem; /* Set spacing at bottom of accordian item */

}

.accordion-button {
    font-size: 2rem;
    font-weight: 700;
}

.accordion-button::after {
    ...
}

.accordion-button:not(.collapsed)::after {
    ...
}

Despite using fontawesome icons in my project and ensuring their successful display, the issue with the accordion icons persists. Attached below is a snippet from the HTML where item 10 on the accordion is defined:

<div class="container">
    <div class="accordion" id="privacyAccordion10">
        ...
    </div>
</div> <!-- End of 10th Item -->

For further reference, the development tools display a snapshot providing insight into the issue. Any assistance or guidance on resolving this matter would be greatly appreciated.

Answer №1

When referring to the style of collapsing in CSS, it is important to note that 'collapsed' is not a CSS property, but rather a class.

Furthermore, it is crucial to remember that the correct class name to use is 'collapsed' and not 'collapse'.

In order to implement this class, simply add it to the buttons class in the HTML code. Instead of

class="accordion-button"
, you should use
class="accordion-button collapsed"

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

How can I simulate mouse position in a UIWebView?

Can the mouse position (x,y) for HTML-5 elements on a UIWebView be programmatically set using stringByExecutingJavascript in order to trigger hover, mouse over, and other interactions? ...

Guide on capturing JSON objects when the server and client are both running on the same system

I created an HTML page with a form that triggers JavaScript when submitted using the following event handler: onClick = operation(this.form) The JavaScript code is: function operation(x) { //url:"C:\Users\jhamb\Desktop\assignmen ...

What is the best way to ensure one div expands to full width while simultaneously hiding another div on the page?

Hey there, I'm looking for a way to expand the width of a clicked div while making the other div disappear from the screen simultaneously. It should also be toggleable, so clicking the button again will shrink the div and bring back the other one. For ...

Joining Two Texts in HTML with a Link Embedded within

Within my HTML code, I have two specific strings: "Forgotten your password?" and "Please" 'HPERLINK' "to change your password". To manage these strings efficiently in different languages, I utilize a messageBundle file to store constants. This f ...

Is there a way to make a table stay at a specific width for screen sizes larger than 1000px, but then adjust its size accordingly as the window size decreases?

<table id="example" class="row-border compact" style="width:1000px; table-layout:fixed;"> The table is currently set to have a width of 1000px, but I would like it to be 90% of the screen width when the window size is less than 1000px. Is it possibl ...

What is the best way to adjust a wide HTML table to make it narrow enough to fit perfectly within the screen width?

I need assistance with formatting an HTML table that contains multiple columns: <table id="req_header" border="2" style="overflow: auto;"> <tr> <th><i class="fa fa-solid fa-check"> ...

Retrieve four distinct values using only a single text box input and display them individually on separate lines

Is there a way to receive four input values from the user using just one textbox and display them on separate lines? function collectData() { var userInput, i; var textOutput = " "; for (i = 0; i <= 3; i++) { userInput = document.g ...

Introduce new material at the start of each line, akin to what ::before accomplishes for the initial line

I am currently working on customizing the appearance of my <code>/<pre> tags while ensuring that users can still easily highlight and copy the code. The method I had in mind (shown below) only applies to the first line and doesn't repeat ...

The Bootstrap v5 dropdown feature is malfunctioning as the drop-down menu fails to appear

I've been struggling to create a dropdown menu using Bootstrap, but it doesn't seem to be working as expected. Despite that, I have no issues utilizing the framework for styling purposes. The Bootstrap js link is placed at the bottom of the body ...

Creating a text design that spans two lines using Scalable Vector Graphics (SVG

I am working with an SVG that displays strings pulled from an Array... {"label":"Here is an example of the string...", "value":4}, The text above is shown in an SVG element as... <text>Here is an example of the string...<text> I would like ...

Customizing Material UI Popover CSS classes within a Select component in a React application

I have integrated the Material UI Select component into my React project. I am attempting to customize the CSS classes .MuiPaper-root and/or .MuiMenu-list. This is how my Select component looks: <Select value={selectValue} disableUnderline onCha ...

The issue of HTML5 audio not working when played multiple times on an Android 4.0.4 device's Native Browser

Currently engaged in a project utilizing HTML5 technology. Encountering an issue with playing the same audio file multiple times on the same page using the Android native browser. The problem is specifically observed on Android ICS 4.0.4. In this version, ...

Align the content in the middle of a column

In an attempt to horizontally align the Latin text within the example below, I wanted to ensure that it is vertically centered. Currently, though, it aligns to the top of the yellow column. CLICK HERE TO VIEW IMAGE <div class="container-fluid&quo ...

Troubles with basic jQuery hide and show functionalities

Hey there! I've been working on a project for the past couple of days and I'm having trouble with creating a slider effect using jQuery hide and show. It's strange because my code works perfectly fine with jquery-1.6.2.min.js, but when I swi ...

The not:first-child selector targets all elements except for the first one in the sequence

This is a simple js gallery. I am using not:first-child to display only one photo when the page is loaded. However, it does not hide the other photos. You can view the gallery at this link: (please note that some photos are +18). My objective is to hide ...

Creating an HTML table by populating it with data from a JavaScript array

Imagine you have a JavaScript array structured like this: [ "Heading 1", "Heading 2", "Data 1", "Data 2", "Data 3", "Data 4", ] Your task is to generate an HTML table from this array that looks like the one in this link: https://i.stack.imgur.com/7laUR. ...

Combining mouse interactions with animated bar transitions

I want to create a graph with dynamic bar height transitions whenever it is drawn or redrawn. Once the bars are displayed, I would like mouse events (mouseenter, mouseleave, and mousemove) to trigger a tooltip showing information about the specific bar bei ...

Issue with fancyBox not functioning properly when integrated with a caption script

Hey there! I've been working with both jQuery's fancyBox for displaying image/video galleries and the Capty script for showing image titles on images. However, I've run into a snag - when the title is displayed on the image, fancyBox st ...

What is the best way to switch an element's attributes using only JavaScript?

As I crafted this inquiry, I noticed that most of the analogous questions were along the lines of this one (where the user seeks to toggle an element's class using pure JS) or that one (where the user wants to toggle other attributes with jQuery). My ...

"Tricky HTML table layout challenge: Margins, paddings, and borders causing

Working with HTML <table cellpadding="0" cellspacing="0"> <tbody> <tr> <td> <img src="..."> </td> </tr> </tbody> </table> Applying CSS rules * { border: none; ...