Is there a way to ensure that the Bootstrap toggle starts off in a collapsed state?

I need assistance with creating a toggle feature where clicking on a line of text will reveal more text below, and when clicked again, the extra text collapses. I want the text color to change to blue when collapsed and red when expanded. The only issue is that upon initial page load, the text color does not appear as the collapsed color. Any help would be greatly appreciated.

.accordion-toggle {
    color: rgb(176, 26, 33) !important;
}

.accordion-toggle.collapsed {
    color: #3a70a1 !important;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous"><
</head>

<body>

      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
              <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne" id="question1"><
               Line of text.
				</a> <
            </h4><
          </div><
          <div id="collapseOne" class="panel-collapse collapse in"><
            <div class="panel-body answer"><
                More text
            </div><
          </div><
        </div><
       </div><


<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script><
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI"" crossorigin="anonymous"></script><
</body><
</html>>

csstwitter-bootstrapbootstrap-4toggle

Answer №1

The reason for this issue is that the class .collapsed is added only after the accordion has been collapsed at least once, rather than upon initial page load.

To fix this, you can introduce a third state for the text, named .initial, which also displays in a blue color. You will then have to manually remove this state using JavaScript as soon as the accordion is opened and no longer in its initial state.

Below is a demonstration:

function removeInitial(el) {
  el.classList.remove("initial");
}
.accordion-toggle {
  color: rgb(176, 26, 33) !important;
}

.accordion-toggle.collapsed {
  color: #3a70a1 !important;
}

.initial {
  color: #3a70a1 !important;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
</head>

<body>

  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle initial" data-toggle="collapse" href="#collapseOne" id="question1" onclick="removeInitial(this)">

                Line of text.
              </a>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body answer">
          More text
        </div>
      </div>
    </div>
  </div>


  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/popperjs/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
</body>

</html>

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

Is there a way to include clickable links within my dropdown menu?

I'm having an issue trying to create a dropdown menu with links on my website, but it doesn't seem to be working. <!doctype html> <html> <head> <style> a.mainhrf ul.mainul { display: none; } a. ...

htmlcsslist

Default values for CSS variables: only apply if the variable has not been previously defined

My Web Component relies on the power of CSS variables. To set default values for these variables is crucial. With their wide usage across multiple files, it's essential to define them once and for all. The initial approach turns the text color to b ...

csscss-variables

I am unable to determine if I have already selected a List Item

My goal is to have a functionality where clicking on "Download Drivers" will open the list, and clicking again will close it. This should be achieved with onclick events only, no hover effects. Additionally, I want the list to remain open even if I click o ...

javascripthtmlcss

DIV with Scrollbar

Is there a method to ensure that both scrollbars are displayed, regardless of whether vertical or horizontal scrolling is required? Currently, I am only seeing one scrollbar when needed. I want to achieve this without restricting the use of the Height or ...

css

Is there a bug in Firefox when using the multicolumn columns property with Flexbox?

Could this be a compatibility issue with Firefox? The layout appears fine in Chrome or when I take out columns: 2, then it also displays correctly in Firefox. div { width: 500px; padding: 2rem; display: inline-flex; align-items: baseline; bor ...

cssfirefoxflexboxcss-multicolumn-layout

I'm having trouble setting the margin to 0 in Bootstrap 4. I'm only using CSS for styling and JavaScript for

Currently in the process of setting up a grid layout for a webpage under development. Encountering an issue with the .container class, that is supposed to contain all my div elements, not having any margin. Managed to remove the margin on the left side usi ...

htmlcssbootstrap-4

having difficulty with installing the bootstrap framework

I'm having issues installing the ng-bootstrap in my project. I keep encountering the following error message. Despite trying to execute the commands below, I haven't had any success. npm install --legacy-peer-deps npm install latest-version He ...

angularnpmbootstrap-4

Issues with CSS styling inheritance in Angular components

I'm facing an issue with a button that is part of an InfoWindow component. The button is not created in the HTML code directly but is called whenever the card component opens. I have integrated this InfoCard into two different sections of the applicat ...

cssangularqueryselectorng-deep

Tips for preloading a small placeholder image before the main content is loaded

After browsing , I noticed an interesting image loading style. The website initially shows a patterned image before revealing the actual content. This method creates visually appealing content while waiting for the entire webpage to load. Upon inspecting ...

javascripthtmlcssimageload

Is there a way to ensure that spans are inline with a div?

My structure is pretty straightforward: <div></div><span></span><span></span> However, I'm looking to have them all appear on a single line. Currently, they are rendering like this: <div /> <span />&l ...

csshtml

Troubleshooting with matTootip on Safari: Tips for avoiding input-text blockage

I am currently using the matTooltip feature from Angular Material for an input field. However, on Safari, the input field appears to be overlapping, making it impossible to type in. Despite my attempts to change the position of the toolTip, the issue pers ...

cssangularangular-material

When hovering over a circle in CSS with a background image to hide text, the shape becomes distorted

I am attempting to create a series of circles with background images and accompanying text displayed side by side. My goal is to have the image opacity change and the text disappear upon hovering over each circle. Additionally, I do not want underlines to ...

csshoverbackground-imagegeometry

Tips for aligning text to the left within a Bootstrap accordion

I am in the process of developing a static website utilizing the W3schools "Company" theme. The complete code for this website, including CSS, is provided below: <!DOCTYPE html> <html lang="en"> <head> <!-- Theme Made By www.w3schoo ...

htmlcss

Issue with triggering a modal while simultaneously closing another one

Let's consider this situation. I currently have a modal called Modal A, which has 2 buttons in the footer: Save and Close. When I click on the "Save" button, my intention is to close Modal A and open Modal B. The code that achieves this functionality ...

javascriptjquerybootstrap-4bootstrap-modal

Edit the alternative text for an image tag to suit your needs

Is there a way to move the displayed mini popup to the left of the mouse cursor when a user hovers over an image with the following code: <img src="image" alt="product code 000000"> I noticed that the default alt text always appears on the right of ...

htmlcssjqueryimage

Attempting to ensure that the social media icons are perfectly centered in between the separators on the page

After adding new menu separators, the alignment of my social media icons has been thrown off and I need them to be centered. I'm not sure why this happened or how to fix it. I attempted to add some CSS but had no success. My website can be found at . ...

htmlcsswebiconsalignment

Alter the color scheme of a paragraph using PHP

I have been working on creating a management panel for a website. My first step was to include an input field to collect a color value: <form> <input type="text" name="test"> <input type="submit" value="Send"> <?php $color = $_REQ ...

phphtmlcss

What is the process for triggering data-dismiss after the href has been activated?

Could someone help me with this issue? <a class='btn btn-danger' href='page.html'>Delete</a> I am trying to activate the "data-dismiss" attribute after the "href" is activated. My initial attempt was using this code: < ...

javascripthtmljquerybootstrap-4

Excess content from the Bootstrap container is spilling over and

Encountered an issue while developing a page using bootstrap5 relating to the positioning of the footer and main content container. Everything was functioning correctly until the addition of the footer: Prior to adding the footer: https://i.sstati ...

htmlcssfooterbootstrap-5

Manipulating viewport settings to simulate smaller screens on a desktop device

I am working with a parent container that contains Bootstrap div.row elements holding div.col-... child elements. I am using jQuery to adjust the width and height of the container dynamically to replicate mobile device sizes for users to preview different ...

javascriptjquerytwitter-bootstrapmedia-queriesviewport