CODEWITHSUNDEEP
javascripthtmlmaterialize
Olivia Delpierre
Olivia Delpierre

Reputation: 107

Change color of collapsible on click materialize

I would like to change the color of the collapsible header only when I click on it. 

<div class="collapsible-header" onclick="connect()"></div>

I have to add the color inside the class element, and I do not really know how to add something to it when I call the "connect" funtion. Is this possible ?

Thank you !

Tried with the following but is not working

HTML 

<div class="collapsible-header" onclick="connect(this)">Robot</div>

And in JS 

function connect(element) 
{ 
    element.style.color = 'red';
    if (connection_status == 0)
    { 
        client.connect(options);
    };
}

Upvotes: 2

Views: 2320

Answers (5)

Prabhakaran
Prabhakaran

Reputation: 1544

Use ToggleClass for better result

(function(){
    $("#run").click(()=>{
        //$(this).css('background','yellow');
        $("#run").toggleClass('yellow');
    });
}());
.yellow {
    background: yellow!important;
}

.red {
    background:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="run" class="red" style="position:absolute;height:100px;width:10px;"></div>

Upvotes: 0

Swarn Singh
Swarn Singh

Reputation: 134

Have a look on this fiddle:

https://jsfiddle.net/swarn_singh/9a6djpwp/

<div onclick="this.style.color = 'red'">
Change color with inline javascript
</div>

<div onclick="changeColor(this)">
Change color with javascript function
</div>

<script>
    function changeColor(element){
        element.style.color = 'blue';
    }
</script>

Upvotes: 1

Kuladeep Surebathina
Kuladeep Surebathina

Reputation: 127

Take a new class and assign the styles you want to append then do this 

$(".collapsible-header").click(function(){
    $(".collapsible-header").toggleClass("NEWCLASS");
});

Upvotes: 3

ghetto_capitalist
ghetto_capitalist

Reputation: 49

https://jsbin.com/sojefubudo/edit?html,js,console,output

<div class="collapsible-header" onclick="connect(this)"></div>

And in javascript : 

function connect(element) {
  element.style.color = 'red';
}

Upvotes: 1

yasarui
yasarui

Reputation: 6573

<div class="collapsible-header" onclick="javascript:this.className += ' additionalClass'"></div>

Upvotes: 0

Related Questions