I have an explandable/collapsible element that I created using Simple-expand (A jQuery plug-in to expand/collapse elements).

What I want to do is change the css of the element when user clicks on it, expanding it ,and change it again when user clicks on it again ,collapsing it.

Problem is, I don't know how to do that. I know how to change class on click, but how can I change the CSS after the user "unclicked" this tab and it shrinked up?

EDIT: Thanks to George for correcting me on what I wanted to do, to be more clear. I was a bit tired, so I needed it fast. I know this is really bad excuse, but I fully understand and respect you guys, who gave me negative feedback.

Basically what I needed, is:

• There's 6 different divs;
• When you click on one div, it will expand;
• When you click on another div, it will check if ANY OF THESE divs are EXPANDED, if YES - close (collapse) them, and open that div which I clicked on.

For that simple task (it's really simple, it's just me being stupid) I needed to use jQuery this statement and a few if's.

I found a solution after 15 mins after publishing this post here and I wanted to delete it, unfortunately, I can't, because it has answers.

Thanks to everyone who tried to help me, I appreciate your help.

Cheers!

I have an explandable/collapsible element that I created using Simple-expand (A jQuery plug-in to expand/collapse elements).

What I want to do is change the css of the element when user clicks on it, expanding it ,and change it again when user clicks on it again ,collapsing it.

Problem is, I don't know how to do that. I know how to change class on click, but how can I change the CSS after the user "unclicked" this tab and it shrinked up?

EDIT: Thanks to George for correcting me on what I wanted to do, to be more clear. I was a bit tired, so I needed it fast. I know this is really bad excuse, but I fully understand and respect you guys, who gave me negative feedback.

Basically what I needed, is:

• There's 6 different divs;
• When you click on one div, it will expand;
• When you click on another div, it will check if ANY OF THESE divs are EXPANDED, if YES - close (collapse) them, and open that div which I clicked on.

For that simple task (it's really simple, it's just me being stupid) I needed to use jQuery this statement and a few if's.

I found a solution after 15 mins after publishing this post here and I wanted to delete it, unfortunately, I can't, because it has answers.

Thanks to everyone who tried to help me, I appreciate your help.

Cheers!

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Apr 29, 2020 at 9:44 George Pant 2,11711 gold badge1111 silver badges1515 bronze badges asked Jul 29, 2016 at 10:48 Paulius K.Paulius K. 21022 silver badges1111 bronze badges 5

• Why not adding the css to a special class: .special{} and adding the class dynamically? – Jonas Wilms Commented Jul 29, 2016 at 10:50
• 3 "Can't post jsFiddle links.." And there's a reason for that. Instead, of working around it, work with the way the site is meant to work: The full content of your question must be in your question, not just linked. Links rot, making the question and its answers useless to people in the future, and people shouldn't have to go off-site to help you. Put a minimal reproducible example in the question, ideally using Stack Snippets (the <> toolbar button) to make it runnable. More: How do I ask a good question? – T.J. Crowder Commented Jul 29, 2016 at 10:51
• Just change it using JavaScript. and unchange it on window.click event – It's a trap Commented Jul 29, 2016 at 10:51
• The "unclick" is not clear to me, did you mean mousedown/mouseup, or click to expand and then click again to collapse? – John Doe Commented Jul 30, 2016 at 2:28
• Edited the answer, sorry for being so unclear. – Paulius K. Commented Jul 30, 2016 at 10:38

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Just use a class for when the element is expanded and toggleClass() to toggle the class on click

$( ".your_element" ).click(function() {
  $( this ).toggleClass( "expanded" );
});

fiddle Demo

CSS

.active {
    background-color: #CC0000;
    font-weight:bold;
    color:#FFFFFF;
}

jQuery

$('#button').click(function () {
    $("#colormethis").toggleClass('active');
});

Use class active than toggleClass using jQuery This how you change CSS. So try making it in your own code.

You can use materialize css collapsible link