Accordion symbol for adding or subtracting

Looking for a way to change the Toggle text in my angular 7 application accordion to images or content displaying a + sign for collapse and - for expand. I need to achieve this using CSS in my SCSS stylesheet so that I can later change the color of the signs. Currently, I have placeholder toggle text that needs to be replaced. Here is the current implementation.

View on StackBlitz

HTML Code:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="card">
    <div class="card-header panel-heading">
        <span class="left-label" style="font-size: 18px; font-weight: bold; ">Fund Classes</span>

        <a class="pull-right" [ngClass]="{'collapsed': !isExpanded}" data-toggle="collapse" href="javascript:void(0);" (click)="expand()" role="button"
            [attr.aria-expanded]="isExpanded" aria-controls="nva"> Toggle
        </a>


    </div>
  <div [ngClass]="{'show': isExpanded}" id="nva" class="collapse" role="tabpanel" aria-labelledby="nva_heading" data-parent="#nva"
    [attr.aria-expanded]="isExpanded">
<div class="card-body">

    <div class="form-group row">
        <label for="inputName" class="col-md-2 " style="font-weight: bold">Name</label>
                <div class="col-md-2" style="border: 1px">

                    <kendo-dropdownlist style="width:100%" 
                        class="form-control  form-control-sm" [data]="Funds" [filterable]="false" textField="Name"
                        [valuePrimitive]="true" valueField="Id" >
                    </kendo-dropdownlist>
                </div>

                <label for="inputEmail" class="col-md-2"  style="font-weight: bold">NAV Reporting Cycle</label>
                <div class="col-md-2">

                    <kendo-dropdownlist  style="width:100%" class="form-control form-control-sm"
                        [data]="ReportingCycle"  [filterable]="false"
                        [textField]="'Name'" [valuePrimitive]="true" [valueField]="'Id'">
                    </kendo-dropdownlist>

                </div>

                <label for="inputTitle" class="col-md-2"  style="font-weight: bold">Plan Asset Fund</label>
                <div class="col-md-2">


                    <label  style="font-size: 13px;font-weight: normal;cursor: pointer">
                        <input type="checkbox"  style="width: 13px; height: 13px;" />
                        Yes </label>
                </div>
  </div>

        <div class="form-group row">
        <label for="inputName" class="col-md-2 " style="font-weight: bold">Name</label>
                <div class="col-md-2" style="border: 1px">

                    <kendo-dropdownlist style="width:100%" 
                        class="form-control  form-control-sm" [data]="Funds" [filterable]="false" textField="Name"
                        [valuePrimitive]="true" valueField="Id" >
                    </kendo-dropdownlist>
                </div>

                <label for="inputEmail" class="col-md-2"  style="font-weight: bold">NAV Reporting Cycle</label>
                <div class="col-md-2">

                    <kendo-dropdownlist  style="width:100%" class="form-control form-control-sm"
                        [data]="ReportingCycle"  [filterable]="false"
                        [textField]="'Name'" [valuePrimitive]="true" [valueField]="'Id'">
                    </kendo-dropdownlist>

                </div>

                <label for="inputTitle" class="col-md-2"  style="font-weight: bold">Plan Asset Fund</label>
                <div class="col-md-2">


                    <label  style="font-size: 13px;font-weight: normal;cursor: pointer">
                        <input type="checkbox"  style="width: 13px; height: 13px;" />
                        Yes </label>
                </div>
  </div>        
</div>
</div>
</div>
htmlcssangularsass

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

Why does my jQuery IMG center script not work in Chrome and Safari, but it works perfectly in IE?

I am experiencing an issue with centering the thumbnails of products on my e-commerce website. Despite successful centering in IE, FF, and Opera, Chrome and Safari are not aligning the thumbnails properly – they remain at the top of the div instead of be ...

phpjqueryhtmlcss

Adjust validation message and minimum value when radio button is altered in Angular application

Seeking a way to dynamically set a validation message and minimum value based on a radio button selection. Currently, there are two radio buttons for either 9 or 18 holes, each with a corresponding input (used in a golf handicap calculator app). The goal i ...

angularvalidationdynamic

What is the best way to make a div stick to the inside of another div with Bootstrap?

As a newcomer to Bootstrap 4, I am curious if there is a way to affix a div to the bottom of its parent div. My structure involves using the classes .container within a .row, along with several child divs: <div class='container'> <d ...

csstwitter-bootstrapbootstrap-4

How to interact with a C# List using JavaScript

Our internship project entails creating a business application using Unity WebGL. However, we're facing a challenge when it comes to retrieving a list from C# to populate a Select element on our webpage. We've successfully communicated and retrie ...

javascriptc#htmlunity-webgl

Sharing data between two Angular 2 component TypeScript files

I'm facing a scenario where I have two components that are not directly related as parent and child, but I need to transfer a value from component A to component B. For example: In src/abc/cde/uij/componentA.ts, there is a variable CustomerId = "sss ...

javascriptangulartypescriptweb-frontend

Angular allows you to easily upload multiple files at once

I am currently facing an issue while attempting to upload multiple files. There seems to be an error somewhere in my code that I have yet to identify. The problem is that nothing is being displayed in the console, but the 'uploadData' appears to ...

javascriptphpangular

Spacing Problem with Title Tooltips

After using the padEnd method to ensure equal spacing for the string and binding in the title, I noticed that the console displayed the string perfectly aligned with spaces, but the binded title appeared different. Is it possible for the title to support s ...

javascripthtmlangulartypescript

Price and advantage in a single line of HTML code

Is there a valid reason for creating one-line HTML? Or is it better not to? I understand that reducing file size is a benefit, but we also need to consider the cost on the server of adding functions to generate one line HTML. Additionally, making changes ...

htmloptimization

Step-by-step guide on embedding a function in HTML using vbscript

I'm working on a dynamic HTML list that I want to enable or disable based on user input. Typically, you can just use the "enabled" or "disabled" attribute at the end of the select element to control the entire list. However, I'm unsure how to ach ...

htmlvbscript

Having issues with ToggleClass and RemoveClass functionalities not functioning properly

As a novice in Jquery and CSS/scss, I've managed to create dynamic bootstrap cards for recording players. Each card consists of a music-container with control-play and vinyl elements. I aim to have multiple bootstrap cards generated based on the data ...

javascriptjqueryhtmlcssjquery-ui

Error encountered in Angular 7.2.0: Attempting to assign a value of type 'string' to a variable of type 'RunGuardsAndResolvers' is not allowed

Encountering an issue with Angular compiler-cli v.7.2.0: Error message: Types of property 'runGuardsAndResolvers' are incompatible. Type 'string' is not assignable to type 'RunGuardsAndResolvers' This error occurs when try ...

javascriptangulartypescriptangular-router

Is it possible to store Json data in a value attribute to showcase it in a form?

JSON data is coming to me and I need to input it into a text box for editing purposes. Here's an example: <div class="form-group"> <label class="control-label col-sm-2" for="email">Email:</label> <div class="col-sm-10"&g ...

htmljson

extracting the value of a chosen radio button in AngularJS using HTML

When attempting to retrieve the selected value from a radio button, I am encountering an issue where choosing "teacher" still shows as "student." Here is the HTML file: <!DOCTYPE html> <html ng-app="phase2"> ... (HTML code continues) Rige ...

javascripthtmlangularjsradio-button

Dynamic website featuring fixed background with content transitioning through clicks or scrolls

Seeking a template or tutorial on how to create a website similar to the following examples: The desired website layout would allow users to scroll through content while keeping the background neutral, with the option to click links that transition to new ...

jqueryhtmlcsscss-transitionstransition

How to correctly deserialize dates in Angular 5

When working with Angular 5, I have encountered an issue where JSON data from an API is not properly deserialized into dates within an array. My model includes a definition like this: export interface ProcessDefinition { _id?: string; proces ...

angulartypescripttype-conversionobservable

Modify the conditions of a CSS file in Bootstrap using JavaScript

My project requires internationalization support for right-to-left languages like Arabic and Hebrew, so I need to modify some Bootstrap classes (such as col) to float right instead of left. I am using create-react-app with babel/webpack and react-bootstra ...

javascriptcssreactjswebpackreact-bootstrap

Improved efficiency in CSS for left transition animations

Here is the current code I am using: .s2 { top: 150px; left: 20px; position: absolute; transition: left 300ms linear; } I am currently updating the left position dynamically using JavaScript based on scroll events. However, I have noticed that th ...

javascriptcssanimation

Guide on incorporating JSON information into an HTML table

Currently, I am retrieving data that needs to be added to an HTML table once it is received. I have attempted some methods, but I am unable to dynamically add the data after the page has loaded. I aim to accomplish this using either JavaScript or jQuery. ...

javascripthtmljsondomaddeventlistener

Rebel Spirit on a Wordpress Platform

I've encountered a strange issue on my Wordpress blog. For some reason, the code "&nbsp" is being inserted right after the opening <body> tag. I have checked the header.php file and there is no instance of this code present there. It's ...

phphtmlcsswordpresswordpress-theming

Dynamically remove the underline tag from a table cell

Within my HTML, I've inserted the code below for a cell: cell.innerHTML = "<u>View All</u>"; In my onclick event for the cell, I have this code (for example, it's based on a condition where I structure the content as shown below, no ...

jqueryhtml