Change the background color of the accordion header

Is there a way to dynamically change the color of an accordion based on the status of the current item in the list?

I'm trying to implement something like ng-class="{status: item.status}" (where I have set testClass: true)

The issue I'm facing is that I can't figure out how to apply the color to the entire accordion heading.

<accordion>
    <accordion-group ng-repeat="item in items" class="animate-repeat" is-open="status.open">
        <accordion-heading>
            <div ng-class="{testClass: true}">
                <p>Test</p>
            </div>
        </accordion-heading>
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <div class="text-content font-size-14">{{item.text}}</div>
                </div>
            </div>
        </div>
    </accordion-group>
</accordion>

CSS

.testClass {
background-color: burlywood;
}

https://i.sstatic.net/SnkVY.png

Any suggestions on how to solve this dilemma?

I encountered a similar problem which was discussed here, but unfortunately, the solution provided didn't work for me: https://github.com/angular-ui/bootstrap/issues/3038

Fiddle Link: http://jsfiddle.net/f8ce1b0w/2/

cssangularjsangular-ui-bootstrap

Answer №1

To apply the specified class to the 'accordion-group' element, you can use CSS for styling.

Here is an example:

<accordion-group ng-controller='MyAccordionGroupController' class="test" is-open="isopen">

You can style it using the following CSS:

.panel {
  &.test {
    & > .panel-heading {
      background-color: red;
    }
  } 
}

You can view a demo of this implementation here: http://jsfiddle.net/BramG/f8ce1b0w/8/

Answer №2

To optimize your code, consider moving the applied class higher in the hierarchy:

Check out this example on JSFiddle

Adjust your CSS to reflect this change:

.panel-warning .panel-heading {
  /* Add your custom styles here */
}

The issue arises when you place the test-item within a padded container. Instead, elevate the test-item-class and utilize CSS selectors to style the elements accordingly.

If your states correspond to Bootstrap states, refer to the validation class names listed here: Bootstrap Panels Migration (panel-success, panel-info, panel-warning, panel-danger)

These class names are already integrated into the Bootstrap CSS library.

Answer №3

Your issue has been resolved

.example{
  background-color: blue;
}

 .parent-container.panel-custom > .panel-header {
    background-color:blue;
}

<accordion-group ng-controller='MyAccordionGroupController' is-open="isopen" class="parent-container">
        <accordion-heading>
         <div class="example">
          I can include styling as well!
          </div>
        </accordion-heading>
        This serves as an example to demonstrate stylish headings.
      </accordion-group>

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

What is the best way to show an error message in AngularJS if passwords do not match?

I recently started learning Angularjs and I'm struggling with displaying an error message when the password doesn't match the confirm password. Can anyone provide some guidance? I'm still new to programming so any help is appreciated. Thank ...

angularjsvalidationangularjs-forms

Execute a function in Ionic upon the app being initiated

I am looking to implement a function that checks for an internet connection every time the app is launched, regardless of the specific view or page within the app. This function should run whenever the app is loaded on the screen, even if it is running in ...

androidiosangularjsionic-framework

What could be the reason for esbuild not being included in the installation process of a fresh Rails 7 application that

After initiating a fresh Rails 7 app, I utilized the command line syntax: $ rails new app_name --css=bootstrap An error occurred during app creation specifically when including --css=bootstrap: Install esbuild run yarn add esbuild from ".& ...

cssruby-on-railsbootstrap-5ruby-on-rails-7esbuild

Attempt to apply border-bottom style results in negligible changes

I have a snippet of HTML that showcases a grid-like structure. It's mostly how I want it to be, but I would like the last three rows to have a dotted underline. I attempted to achieve this using the following styling: style="border-bottom:dotted; bor ...

htmlcssborder

Basic jQuery Slideshow Counter

I'm having trouble implementing a text-based horizontal slider on my website that scrolls left and right with mouse control. I want to display the current index of each slide along with the total number of slides (e.g. 1/4) and update the index as use ...

jqueryhtmlcsscarouselcounter

A lengthy string of characters within a continuous paragraph without any interruptions

Is it possible to have a long string automatically move to the next line without breaking any characters in the string, rather than splitting the word between lines? The current display looks like this: My sample text ha s errors as it is display ...

javascripthtmlcss

Show a button using CSS when the cursor is hovering

Expressing my gratitude to everyone! I need assistance with implementing a function in reactJS where the <button /> remains hidden during page loading and reveals itself when hovered over. Despite trying various methods, I have been unable to resolve ...

javascriptcssreactjsless

Fix the uneven shape border/outline

I made 3 circles using CSS (:after) and noticed that the border looks uneven with certain background colors. Any suggestions on how to resolve this issue? You can view the problem here: Just below the post title, you'll find the first blue circle bo ...

cssborder

Switch the image source when hovering over a text menu

Currently, I have been using the following code to switch between images. However, what I actually want to do is change the image when hovering over the title link of the image. onmouseover="this.src='Images/img.png'" onmouseout="this.src=' ...

javascriptjqueryhtmlcssimage

What causes IE11 to sporadically run inappropriate media queries?

My website has been displaying incorrectly on IE11 due to a media query being executed for widths less than 767px, even though the window width is actually more than that. Interestingly, this issue only occurs randomly and never when the debug window is op ...

csstwitter-bootstrapinternet-explorermedia-queries

Tips for aligning a text box in the center using Bootstrap

Is it possible to easily center the input text box of bootstrap? <form action="#" method="post" class="akame-contact-form border-0 p-0"> <div class="row justify-content-center"> <div class= ...

htmlcssformsbootstrap-4

Can a Directive be nested within another Directive in AngularJS?

I'm currently working on integrating the drag and drop directive from into another directive within my AngularJS application. angular.module('MyApp') .directive('seconddirective', function ($rootScope, $lvlDraggable) { ret ...

angularjsangularjs-directive

The Bootstrap table is not adhering to the specified width when the display is set

I encountered an issue starting yesterday. I am utilizing Bootstrap 4 and tables. Whenever I set a width greater than 13.5vw, the table does not adjust accordingly. You can view the fiddle here Below is the code snippet: HTML <table cl ...

htmlcsstwitter-bootstrap

Filtering Array Elements with AngularJS Repeater

Can I customize my ng-repeat to filter through an array or object? Currently, I am populating via an http request like this: <div class="ibox" ng-repeat="data in appraisals track by $index"> However, I am wondering if there is a way to apply a fi ...

angularjs

Steps for configuring gulp-watch with a TFS project to prevent the EPERM problem

In my current project, I am utilizing angularJS with bower for managing dependencies on the web UI and npm for handling dependencies like bower, gulp, karam, etc. This project is stored in TFS and we are using VS2013 as we have a Web API v2 project that re ...

angularjsvisual-studio-2013tfsgulp

Adjust the text orientation using CSS within an SVG element

Here is the SVG code snippet that I am working with: https://jsfiddle.net/danpan/m3ofzrc1/. It generates the image shown below. The image consists of two lines of text wrapped around a circle: HELLO_WORLD_1 HELLO_WORLD_2 I want to change the direction ...

htmlcsssvgcss-animations

Registering multiple click events to elements with AngularJS in a similar fashion to JQuery

Is there a more modern Angular approach to capturing element clicks without relying on ng-click? In JQuery, we often use the following methods: $("div").on("click",function); $("div").click(function); These techniques allow for dynamic click event regis ...

jqueryangularjs

Creating responsive Twitter Bootstrap layouts that include nested containers with beautiful background images

I am currently working on nesting containers using Twitter Bootstrap in order to achieve the layout shown in this screenshot. The height of the bubble image in the PSD is 404px, and I need it to be responsive across all devices while scaling appropriately ...

htmlcsstwitter-bootstrapbootstrap-4

Submitting form data in Angular is a straightforward process

I'm currently using the ng-flow library to upload images to my server. After a user drags and drops an image, I can successfully retrieve the HTML 5 file image in my controller. However, when trying to download it to the server along with other parame ...

javascriptphpangularjs

The line segment refuses to remain hidden beneath the h2 tag

Just getting started with HTML/CSS here! I'm trying to figure out how to keep a line directly under an h2 tag. In my code, there's an h2 tag labeled 'Instructions' followed by a div containing 3 other divs making up a line segment. By d ...

htmlcss