Modify the icon in the header of MaterializeCSS Collapsible when it is opened

I'm struggling to figure out how to change the icon of a toggled collapsible element. I have been reviewing their documentation but am having trouble making it work as intended.

$('.collaps_roles_permission').collapsible({
    accordion: true,    
    onOpen: function(el){
        //$('li.roles_icon', this).html('remove');
        console.log(el);
        console.log(el[0]);
    },
    onClose:function(el){
        //switch back icon to normal
    }

});

Is there a way to modify the collapsible header when it is toggled?

<div class="collapsible-header">
    <i class="material-icons roles_icon">add</i>
    {{ $r->display_name }}
</div>
javascriptjquerycssmaterialize

Answer №1

When you are in the onOpen function, utilize the variable el to locate the icon positioned in the header.

onOpen: function(el) {
    $(el).find('.collapsible-header i').text('remove');
}

Answer №2

To achieve this functionality, all you need to do is utilize the .click event handler in jQuery:

$('.expandable').click(function() {
    $(this).expandable({
        onExpand: function(element) { element.find('.expandable-header').text('Modified'); }
    });
});

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

Utilizing the child element's attribute value in a list to dynamically modify the CSS styling of a div element

I'm struggling with designing a ranking bar that consists of 9 bars. I want the height of the bars to vary, with bar 0 and bar 8 being the longest. However, I am having difficulty manipulating my jQuery selector to change the CSS style of the bars bas ...

javascriptjquerycsshtml

"Using html_attr with the attribute "href" does not return any value in the rvest package

My objective is to extract the URLs linked with specific CSS elements on a website using rvest. Despite trying various methods, such as using the html_attr function with the 'href' argument, my current script only returns NA values instead of the ...

htmlcssrweb-scrapingrvest

Having trouble creating an alias system in discord.js and encountering errors

While developing an alias system for my Discord bot, I encountered a situation where I wanted to display the message: "if the user entered the wrong command name or alias then return: invalid command/alias". However, when implementing this logic, ...

javascriptnode.jsdiscorddiscord.js

When executing multiple promises in parallel, the function Promise.all() does not support the spread() method

I'm attempting to simultaneously run two promises using sequelize, and then display the results in a .ejs template. However, I keep encountering the following error: Promise.all(...).spread is not a function Below is my code snippet: var environme ...

javascriptnode.jspromisesequelize.js

Tips for properly implementing ng-hide and ng-show across various sections of your single page application

Currently working on a Single Page Application (SPA). I've included some buttons in the side navigation with the intention of displaying different content when they are clicked. However, I encountered an issue where using ng-hide and show didn't ...

javascriptjqueryangularjs

Give drawn elements a touch of fuzziness and experiment with the color of the fragment shader

I am currently experimenting with creating an animated gradient effect by blending three separate blobs together in a melting-like fashion, with each blob moving independently. The desired result can be seen in the image provided below. So far, I have bee ...

javascriptthree.jsglslwebglfragment-shader

Having trouble configuring the proxy port for my Vue.js application

I'm currently developing a web application using vue.js for the front end and node.js for the server. Vue is running on port 8080 and Node.js is running on port 3001. To make API calls, I have set up a proxy in my vue.config.js file, but it doesn&apos ...

javascriptvue.jsproxyvuejs2axios

Guide to displaying a progress bar while submitting a form using JavaScript and AJAX

After successfully creating the progress bar for my project, I encountered a technical issue. When I choose to upload a file, it gets uploaded twice - once when selecting the file and then again when submitting the form. This creates a poor user experience ...

javascriptjsonreactjsdjangoajax

Struggling to remove quotation marks from a string that was originally an array before being converted?

Here is the code snippet that I am struggling with: users = [{ "userid": "45", "name": "steve" }, { "userid": "32", "name": "john" }]; getuser = users.flatMap(user => user.userid === '32' ? user.name : []); result = getuser.toSt ...

javascriptreplaceall

Update the value of a scope variable directly within a controller. Subsequently making a function call

Hey there, I just want to start by saying sorry in case this question has already been asked or if it seems silly. I'm pretty new to AngularJS and have managed to overcome CORS errors, set up login via Parse, and even created an API for my app using ...

javascriptangularjsnode.js

Tips for efficiently playing a WAV file in JavaScript by building an AudioBuffer

I'm having trouble playing the WAV file located at this link. The file plays fine in VLC and the details show that it is a Mono IMA WAV APDCM Audio (ms) file sampled at 24000Hz with 16 bits per sample. However, when I try to play the file by embeddin ...

javascripthtmlaudiowavaudiobuffer

Revitalizing JSP Table with jQuery & Ajax: The Ultimate Guide

I'm a beginner in the field of web development. Currently, I have developed an application using Spring MVC and JSP. However, when my page reloads after submitting a form, which is not the desired behavior. I would like to implement jQuery and Ajax ...

jqueryajaxspring-mvcjsp

Is there a way to make a React Component to update and navigate to a specific position using react-sound

Currently, I am in the process of constructing an audio player utilizing react-sound. One feature I aim to incorporate is the ability to return to a specific position within the audio track. At the moment, this is my approach: goToVeryCustomPosition() { ...

javascriptreactjsaudioreact-nativecomponents

Spin an object on a stationary axis

https://i.sstatic.net/8dT9W.gif Is there a method to create a similar effect using CSS, JS, or GSAP? ...

javascriptcssanimation

The latest pathway fails to refresh in NextJs

I've implemented a search bar at the top of my app which directs to /search/[searchId].js page: <Link href={`/search/${search}`}> <button type='submit' className='btn-cta btn-3'>SEARCH</button> < ...

javascriptreactjsnext.js

Easily move a group of HTML elements at the same time with a simple

Exploring HTML5 Drag and Drop with Multiple Elements When it comes to dragging and dropping multiple elements in HTML5, there seems to be a limitation with the default draggable attribute. This attribute allows only one element to be dragged at a time, ma ...

javascripthtml

What is the process for collapsing Kendo Grid headers?

My current task is rather unusual. I have been tasked with collapsing all data rows of a Kendo grid to its header. While I am familiar with collapsing to groups, this particular requirement seems quite challenging. Below is the proposed design for the Ken ...

jquerykendo-uikendo-grid

Utilizing the Vuetify Dialog Component in a repetitive manner to confirm the deletion of an event

In a project I'm working on, there's a 'datatable.vue' file that loops through data and displays it in a table. Within this loop, I want to implement a reusable dialog component from Vuetify (v-dialog) that will load upon interaction wi ...

javascriptvue.jsvuetify.js

Step-by-step guide to implementing dynamic field autocomplete using AJAX techniques

Seeking assistance in merging ajax autocomplete with dynamic field input. The autocomplete feature is currently working on the first field, but when adding another field, the autocomplete stops functioning. Any help would be greatly appreciated. Here is t ...

javascriptjqueryajax

Implementing Multiple Identification using JavaScript and PHP

I need to complete a simple task. Here is the code snippet: echo' <div class="col-sm-12" id="recensioni_titolo"> <form role="form" id="review-form" method="post" action="php\insert_comment.php"> ...

javascriptphphtmlattributes