Building a collapsible toggle feature with an SVG icon using HTML and CSS

I am trying to swap a FontAwesome Icon with a Google Materials SVG Icon when a collapsible table button toggle is pressed (changing from a down arrow to an up arrow). I have been struggling to get the Google Material Icons code to work. How can I resolve this issue?

The desired functionality should be similar to this, but using Google icons:

https://codepen.io/tofanelli/pen/waadRY

Font Awesome

.card-header .accordion-toggle:after {
    font-family: 'Glyphicons Halflings';
    content: "\e114"; 
    float: right; 
    color: grey; 
}

.card-header .accordion-toggle.collapsed:after {
    content: "\e113";
}

Google Material Icons:

.card-header .accordion-toggle:after .material-icons{
    content: "\e5cf"; 
    float: right; 
    color: grey; 
}

etc

Here is an example image of the button toggling:

https://i.stack.imgur.com/SQlUO.png

javascripthtmlcsstwitter-bootstrapmaterial-ui

Answer №1

To start, ensure you have the Google web font included in your project

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">

In the CSS styling for the toggle buttons, make sure to update

font-family: 'Glyphicons Halflings';

to

font-family: 'Material Icons';

and replace

content: "\e114";

with either

content: "expand_less";

or

content: "expand_more";

For example:

.panel-heading .accordion-toggle:after {
  font-family: 'Material Icons';
  content: "expand_less";
  float: right;
  color: grey;
}

.panel-heading .accordion-toggle.collapsed:after {
  font-family: 'Material Icons';
  content:"expand_more";
}
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<div class="container">


  <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" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
          on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
          raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
          on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
          raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
        </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse">
        <div class="panel-body">
          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
          on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
          raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
        </div>
      </div>
    </div>
  </div>


</div>
<!-- end container -->

<!-- Latest compiled and minified JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>

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

Enable divs to be interactively chosen

I have created two selectable divs that function like buttons. By using the left and right arrow keys, I am able to select one of the divs with this code: document.addEventListener("keydown", keyDownDocument, false); function keyDownDocument(e) { var k ...

javascripthtmlcss

Retain the chosen values even after submitting the form

Consider the following form: <form method="get" action=""> <select name="name"> <option value="a">a</option> <option value="b">b</option> </select> <select name="location"> <opt ...

phpjavascripthtmlwordpressforms

Creating a CSS auto center for elements, with a unique twist

I have a design layout like this: Click here to view the image My auto-centered content is styled with the following CSS: width: 960px; margin: 0px auto; Within this auto-centered content, there is a DIV element that needs to span the full width of the ...

htmlcss

What is the best way to incorporate a percentage-based width scrollbar?

Help needed: I want to implement a scroll feature for the parent div but here's the catch - the width of the text inside the div needs to be in percentage. So, if there is a long name, it should scroll within the parent div. HTML: <div id="list"& ...

htmlcss

Moving an image between different routes using a query

enter image description here I am currently working on a project where I need to take an image input file from the user and display it in another route. To achieve this, I am using query parameters. Issue: However, despite my efforts, the image is not bei ...

javascriptimagenext.js

Implementing Ajax to display autocomplete suggestions in an HTML table

I've been working on implementing an ajax auto complete function into my HTML code. My goal is to display the results from the auto complete function in a table on the html page. Although the auto complete function is working and I can see the drop do ...

htmlajax

What is the process of substituting types in typescript?

Imagine I have the following: type Person = { name: string hobbies: Array<string> } and then this: const people: Array<Person> = [{name: "rich", age: 28}] How can I add an age AND replace hobbies with a different type (Array< ...

javascriptreactjstypescripttypes

How can one transfer information from a client to a server and complete a form using JavaScript?

Can the information be transferred from a client to the server using just JS, then fill out a form on the server, and finally redirect the client to view a pre-filled form? I am considering utilizing AJAX to send a JSON object, but unsure if it will be s ...

javascriptphphtmlajaxjson

Tips for aligning one item in the center and another item on the right with MUI v5

My goal is to center 3 navigation tabs in the middle of my page and have a dropdown on the far right for sorting. I managed to get the dropdown on the far right, but I'm having trouble perfectly centering the 3 navigation tabs inside the <Box> & ...

cssreactjsflexboxmaterial-ui

A function injected into a constructor of a class causes an undefined error

As I delve into learning about utilizing typescript for constructing API's, I have encountered a couple of challenges at the moment. Initially, I have developed a fairly straightforward PostController Class that has the ability to accept a use-case wh ...

javascriptnode.jstypescriptexpressmongoose

Loading Images in Advance with jQuery, Native JavaScript, and CSS

After successfully implementing a method to hover on a small image and load an additional image to the right side of the page, I am now looking to enhance user experience by preloading images. Is there a way to preload an image using JQuery, allowing it t ...

javascriptjquerycssimagepreloading

What is the best way to use CSS to center two blocks with space in between them?

My goal is to achieve a specific design: I want two text blocks with some space in between them aligned around the midline of the page (refer to the image). I have experimented with the float property, as well as used margin and padding to create the gap ...

htmlcssalignment

Utilizing v-for and CSS Grid to showcase data effectively

I'm having trouble organizing my Vuex data with CSS GRID. It's turning out messy. My setup includes two columns: the first one for labels and the second for values. {{$store.state.stepOne.textfield[idx].label}} The code above is used to displa ...

cssvue.jscss-grid

"What is the best way to access and extract data from a nested json file on an

I've been struggling with this issue for weeks, scouring the Internet for a solution without success. How can I extract and display the year name and course name from my .json file? Do I need to link career.id and year.id to display career year cours ...

javascripthtmlangulartypescriptionic-framework

Is there a way to halt the compiler until an Ajax request is fully processed?

Within my form, there is a field labeled parent keywords as a secret key. The validation of this form using JavaScript functions smoothly. It is designed to check if the secret key is associated with any parent or not. If not, the value is set to 0 by defa ...

javascriptphpjqueryajaxcompiler-construction

What is a superior option to converting to a promise?

Imagine I am creating a function like the one below: async function foo(axe: Axe): Promise<Sword> { // ... } This function is designed to be utilized in this manner: async function bar() { // acquire an axe somehow ... const sword = await foo ...

javascripttypescriptasync-awaitpromisefuture

What is the best way to activate multiple events within an overlapping area containing multiple divs at the same

How can I trigger events on same level divs that overlap in different areas? When there are multiple divs overlapping, only one of them gets triggered. Is there a way to trigger events on all overlapped same level divs? Here is an example code snippet: ...

javascripthtmlcss

The attribute interface overload in Typescript is an important concept to

Consider a scenario where there are multiple payload options available: interface IOne { type: 'One', payload: { name: string, age: number } } interface ITwo { type: 'Two', payload: string } declare type TBoth = IOne ...

javascriptnode.jstypescript

Sequencing the loading of resources in AngularJS one after the other by utilizing promises

While working in a service, my goal is to load a resource using $http, store it in a variable, load a child resource and store that as well. I understand the concept of promises for this task, but I am struggling with how to properly implement it in my cod ...

javascriptangularjspromise

Tips for keeping a label above an input field

Is it possible to add a styled label on top of an input element? I have seen images placed inside input elements for indicating the type of input accepted. For example, in a login form, a user icon represents the username field and a key icon represents th ...

htmlcss