Issue with the pluses and minuses in the Bootstrap accordion

Can someone explain why the panel-header displays all "-" instead of "+"?

When I click on the panel, it changes all "-" to "+". This happens consistently, not just the first time the page loads.

My CSS code:

.panel-heading a:after {
    font-family: 'Glyphicons Halflings';
    content: "\2212"; /* Plus */
    float: right;
    color: #ebebeb;
    background-color:#fff;
    padding:12px;
    font-size:12px;
    border-radius:6px;
}

.panel-heading a.collapsed:after {
    content: "\2b";
}

If you want to see the full code, check out this Jsfiddle link.

Any ideas on what mistake I may have made?

htmlcsstwitter-bootstrap-3

Answer №1

Upon loading the page, the accordions are supposed to display with the open (or minus) symbol because they require a bootstrap class called collapsed in the a tag with the attribute -> data-toggle="collapse". It seems that the collapsed class is missing from your code.

In order for it to work correctly, your code should resemble:

<a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                          Agronomija</a>

See Demo

Answer №2

In order to ensure the proper functionality of your website, make sure to add the "collapsed" class to all "a" tags with the attribute "data-toggle="collapse". When users interact with the collapsible feature provided by Bootstrap, the "collapsed" class will be dynamically inserted into the Document Object Model (DOM) at the specified location.

.agronomija {
  background-image: url(./image/agronomija.png) !important;
  background-position: 101% 60%;
  !important;
  background-repeat: no-repeat !important;

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

Completing a form and saving data to a document

I have a form that successfully writes to a text file using PHP. However, after submitting the form, the page reloads and shows a blank page. Currently, there is a message that appears using jQuery after the form is submitted. My goal is to prevent the pa ...

javascriptphpjqueryhtmlajax

Dynamically Loading CSS files in a JQuery plugin using a Conditional Test

I'm trying to figure out the optimal way to dynamically load certain files based on specific conditions. Currently, I am loading three CSS files and two javascript files like this: <link href="core.min.css" rel="stylesheet" type="text/css"> & ...

javascriptjquerycssyepnope

Using JavaFX to create a TreeTableView with nodes of varying sizes

I need assistance with styling TreeTableViews and their rows. I have set up a treetableview showcasing objects named Component, divided into classes A, B, and C. In my setup, B objects are nested within A, and C objects are nested within B objects. While I ...

javacssjavafxtreetableview

Animating Angular ng-template on open/close state status

I am looking to add animation when the status of my ng-template changes, but I am unable to find any information about this component... This is the code in my report.component.html <ngb-accordion (click)="arrowRotation(i)" (panelChange)="isOpen($even ...

htmlcssangulartypescript

Preserve HTML element states upon refreshing the page

On my webpage, I have draggable and resizable DIVs that I want to save the state of so they remain the same after a page refresh. This functionality is seen in features like Facebook chat where open windows remain open even after refreshing the page. Can ...

javascripthtml

"Varying hues on various displays: Exploring RGB values and CSS for video color

Recently, I designed a webpage with a background-color of #f4afac. The video embedded in this page also features the same background color throughout, creating a seamless blend with no visible edges. On one screen, the colors appear perfectly consistent. ...

csshtmlvideocolors

Problem with z-index in VueJS: Child div z-index not functioning within v-dialog

I am facing an issue where I have brought a span to display a loading image inside the v-Dialog of a vuejs screen. The problem is that the v-dialog has a z-index of 220 set as inline style, causing my new span (loading image) to appear below the v-dialog. ...

jquerycssvue.jsz-index

How to Use Vue.js to Find the Nearest Div Element with a Specific

Below is the HTML code I am working with: <div id="app"> <div class="image"> <div class="overlay"> <p>Some overlay text</p> </div> <img src="https://placeimg.com/640/480/any" class="img-fluid"> ...

javascripthtmlcssvue.js

Creating a chat interface with chat bubbles in React JS can be done by implementing components such as Message

Having some JSON data stored in dummyData, I am seeking guidance on how to position chat bubbles on the left and right based on the direction. My framework of choice is Material UI along with the context API. The attached image serves as a visual reference ...

javascriptcssreactjsmaterial-uijsx

What is the best way to display a success notification when a transaction is successfully executed in web SQL

var brand = "Glare"; var price = "3000$"; var color = "blue"; var success = tx.executeSql("INSERT INTO truck (brand, price, color) VALUES ('"+brand+"','"+price+"','"+color+"' ")"); if(success) { alert("successfully insert ...

javascriptjqueryhtml

Employing setInterval() without clearing previously triggered events

Can someone clarify the distinction between these two functions: function displayTime(){ var current = new Date(); var hours = current.getHours(); var minutes = current.getMinutes(); var seconds = current.getSeconds(); ...

javascripthtmlsetinterval

The functionality of changing the checkbox to "checked" by clicking on the span is not

How can I create a toggle button with a checkbox using css and jquery? Clicking on the span representing the toggle button should change the checked property of the checkbox. Currently, the span does not change the property, even though it triggers the c ...

javascriptjqueryhtmlcss

Selenium is unable to activate the button element by clicking

I have been using Selenium with Python and attempting to click a button, but it simply isn't working. Here is the relevant HTML: <div class="nmMym"> <button class="sqdOP yWX7d _8A5w5 " type="button"> ...

pythonhtmlseleniumselenium-webdriverautomation

The value property of the input element is returning as undefined

The input value entered is always returning undefined. Despite trying various solutions found in similar questions, my jQuery code continues to return undefined. jQuery: $( document ).ready(function() { $('#Input').keypress( function(e ...

jqueryhtmlcss

Guide on updating a MongoDB document upon clicking a button on an HTML page

I'm new to backend development and I've been working on creating a CRUD notes application without using React or EJS. My current issue is that I am unable to edit documents. The desired functionality is for the user to be directed to a page wher ...

javascripthtmlnode.jsexpressmongoose

In Bootstrap 5, the anchor tag is causing a shift in the background color of surrounding tags upon being clicked

Why does clicking on an anchor tag temporarily change the background of other tags that weren't clicked? What am I doing wrong? https://i.stack.imgur.com/ZKlUT.png Check out the code below: <nav class="navbar navbar-expand-lg navbar-light bg- ...

htmlcssbootstrap-5

Why do elements align horizontally in a div even when I specify it to display as a block?

My understanding is that display: block is the default setting. However, even after specifically setting display: block, my div was still aligning items horizontally. The only solution I found was to use: display: flex; flex-direction: column; Any insight ...

htmlcss

What is the best way to position a button on the right side of the page, ensuring that all text

I need help aligning my button (JSX component) to the right side while ensuring that all text remains on a single line. I am working with next.js and tailwindcss, and the button includes plain text as well as a react-icon. These components are all wrapped ...

cssnext.jstailwind-cssreact-icons

Steps for implementing Onclick event within the <Script> tag to display a div:

I am currently working on a code that allows me to show and hide a <div> element after clicking on an advertisement from any website. This advertisement is generated by a script. How can I implement the onclick event within the <script> tag? T ...

javascriptjqueryhtmlonclickdom-events

Navigate to the AngularJS documentation and locate the section on monitoring data changes after a dropdown selection

Just starting out with AngularJS and Stack Overflow, so I hope I am asking this question correctly. I am working on a single-page application with editable text inputs. Two select drop-downs are used to control which data is displayed - one for time perio ...

javascripthtmlangularjsdrop-down-menumodal-dialog