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

Restoring the background color to its original shade following alterations made by jQuery

In my table, I have multiple rows with alternating white and grey backgrounds achieved through CSS. .profile tr:nth-child(odd) { background:#eee; } .profile tr:nth-child(even) { background:none; } However, I now want to allow users to select a row ...

jquerycssbackground-color

Incorporating outside content into HTML

Currently, I am working on a project at my job which requires me to create a comprehensive help file with multiple chapters and extensive text all within one large HTML file. However, as the text will need to be translated into different languages, I am lo ...

javascriptjqueryhtml

Utilizing interpolation in Angular to apply CSS styling to specific sections of a TypeScript variable

Suppose I have a variable called data in the app.component.ts file of type :string. In the app.component.html file, I am displaying the value of data on the UI using string interpolation like {{data}}. My question is, how can I apply some css to specific ...

cssangulartypescriptstring-interpolation

Modifying Checkbox BorderWidth in Material UI v5

Seeking assistance with adjusting the checkbox border width in Material UI v5. I currently have a custom checkbox and would like to remove the border width. Despite trying numerous solutions, I have been unsuccessful so far. checkbox <Checkbox de ...

cssreactjsmaterial-uinext.jsjss

Can you confirm if the content-type of this SOAP response is valid?

While trying to utilize a third-party WebService within Visual Studio 2008, I received a unique response from the server. This particular response contained two content-type tags. HTTP/1.0 200 OK Server: SMBDK_1/2.3.0 Date: Thu, 09 Aug 2012 18:59:14 G ...

htmlwcfsoapwsdl

Display the div only when the radio button has been selected

I have been attempting to tackle this issue for quite some time now, but unfortunately, I haven't had any success. My goal is to display a specific div on the webpage when a particular radio button is selected. While I have managed to achieve this by ...

javascripthtmlformsinputradio-button

Working condition may vary depending on the size of the item

I have integrated the Masonry jQuery plugin into my design, but it is not functioning properly. The CSS class mentioned in the documentation only includes: width: 25% For my purposes, I modified it to: width: 24% float: left margin-right: 5px This modi ...

jqueryhtmlcssmasonry

What is the best way to implement a link that triggers a chat box in HTML?

Hello, I need some assistance with an HTML project. I am attempting to create a hyperlink that displays as a group of words, and when clicked, triggers a pop-up message. Additionally, I would like to have control over the content displayed in the pop-up ...

htmlpopup

Can a complete form be encapsulated within a single AngularJS directive?

While I have come across several instances of individuals utilizing a blend of HTML and directives to craft an AngularJS form (as seen here), my goal is to develop a self-contained widget. This widget would encompass all the necessary HTML for the form w ...

javascripthtmlangularjsforms

Purchase Masonry Supplies for Optimal Arrangement

I've been using a neat little tool called jquery-isotope to create a masonry style layout for the blog posts on my website. It's set up with two columns, showcasing two different post types - long form articles and image-only posts. The masonry ...

jquerycssjquery-masonryjquery-isotope

The value of the HTML input control vanishes once padding is added

I am in need of some assistance with CSS in formatting the text box for BID VALUE (input element) (See in Image 1) Image 1 The product link can be found here When I try to widen the text box using padding, the text value inside the box disappears (seems ...

htmlcsswordpress

"Troubleshoot: Why is the Position Absolute Not Functioning in

Trying to achieve a layout similar to the last element at the bottom of the footer] 1, but getting something like this instead: https://i.sstatic.net/lXazk.png <footer> <div class="container-fluid"> <div class="row"> ...

htmltwitter-bootstrapcss

PayPal form without encryption

Once upon a time, I recall creating a button in Paypal which provided me with a standard HTML form. However, now everything seems to be encrypted. Is there a way to retrieve an unencrypted format? I need to be able to manually adjust the price using jQuer ...

phphtmlencryptionpaypal

How can I access the fourth div element within the initial row of a multirow div container?

My current HTML structure is causing me some confusion. I am trying to create a CSS selector for the element with the text "DESIRED ELEMENT": <div class="TopDiv"> <div class="container"> <div class="row"> ...

csscss-selectorsselenium-webdriver

Ways to restrict users from accessing a file stored on the server?

This might seem like a silly question, and yes, it is quite naive. I currently have two files stored on my server: index.html, file.txt Is there a simple way to prevent users from accessing file.txt directly by entering its URL like this: website.d ...

phphtmlfileserver

How can I turn off Angular Grid's virtualization feature, where Angular generates div elements for the grid based on height and width positions?

Currently, I am working with an Angular grid (ag-grid) that dynamically creates div elements in the DOM to display data as the user scrolls or views different sections. As part of my testing process using Selenium WebDriver, I need to retrieve this data fr ...

javascriptcssangularjsseleniumag-grid

The discrepancy in percentages by a single pixel within Webkit

I am facing an issue with the positioning of two div elements. The first one has a height of 40% and the second one has a height of 60%. I have set the first element to be positioned at top: 0; and the second one at bottom: 0;. However, in Webkit browsers, ...

htmlcsswebkit

Text spilling out of a floated division

I'm currently working on a fluid layout design, but I've encountered an issue with the left menu text overflowing. I can't seem to get overflow:hidden to work properly. You'll notice that in the blue area, I have highlighted the text t ...

csshtmloverflow

Transform your standard HTML buttons into a collective of radio buttons

Looking for a way to make some ordinary buttons function as radio buttons without adding another library to the project. Any suggestions on how this can be achieved using just HTML and JavaScript/jQuery? Appreciate any help, thank you. ...

javascriptjqueryhtml

Tips for setting uniform line-height across an entire project by adding a fixed value to the font size

I need to update line heights for a complete project. The requirement is that all line heights should equal the font size plus 4 pixels. Is there a simple way to do this using SCSS? Adjusting based on percentage would be easy, but the specific value is g ...

htmlcsssassfont-size